Question

我用里面的文字创建了一个div。我正在尝试创建一个悬停函数，这将使方形div具有半透明边缘。

我正在尝试使用Radial Gradient执行此操作。但是，如果我尝试使用透明度，它也会导致整个径向渐变变得透明。

有没有办法，我可以“删除”中间颜色，使文字在中间可见，白边有透明度？

我已经四处询问，我听说有一种方法可以“覆盖”它。不确定这是否可能。

我知道Photoshop会是一个不错的选择。但我想看看是否有办法用纯粹的CSS来取得这样的效果。或者有没有更好的方法来制作一个透明边框，比我丢失的Radial Gradient更实用？

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

感谢vals我明白了。如果有人有兴趣，这就是答案。

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

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

第一种颜色将是完全透明的，因此背景将是可见的，白色将是半透明的，在边缘上呈现“闪亮”的外观。 70％将告诉css第一种颜色将结束的位置（距边界和边缘30％）

我希望这会对一些新手开发者有所帮助:)。

仅限CSS径向透明中心

2 个答案: