仅 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>