仅限 CSS 径向透明度中心

Question

我创建了一个包含 a 文本的div。我正在尝试创建一个悬停函数，这将导致方形div 具有半透明边缘。

我正在尝试使用径向渐变来做到这一点。但是，如果我尝试使用透明度，它也会导致整个径向渐变变得透明。

有没有办法，我可以"删除"中间颜色，以便文本在中间可见并在白色边缘具有透明度？

我四处打听过，听说有一种方法可以"覆盖"它。不确定这是否可能。

我知道Photoshop将是一个不错的选择。但我想看看是否有办法用纯 CSS 成功这样的效果。或者有没有更好的方法来制作一个带有透明边缘的盒子，比我缺少的径向渐变更实用的东西？

Answer 1

像这样的东西

.test {
  background-image: radial-gradient(ellipse, white, transparent 70%);
  color: red;
  font-size: 70px;
  display: inline-block;
  border: solid 1px black;
  }
  
body {
  background-color: lightgreen;
 }

<div class="test">TEST</div>

Answer 2

多亏了

瓦尔斯，我想通了。如果有人感兴趣，这就是答案。

1：您可以设置2种颜色。内部颜色与背景相同。外色白色。

2：内色可以是任何东西，外色可以是白色。每种颜色都可以单独透明。RGBA （26,26,26,0） 70%， RGBA （250， 250,250,0.6）

第一种颜色将是完全透明的，因此背景将是可见的，白色将是半透明的，在边缘上具有"闪亮"的外观。70% 会告诉 CSS 第 1 种颜色将在哪里结束（30% 远离边框和边缘）

我希望这将帮助一些新手开发人员:)