0

我创建了一个 div，里面有一个文本。我正在尝试创建一个悬停功能，这将导致方形 div 具有半透明的边缘。

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

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

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

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

4

2 回答 2

2

像这样的东西

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

于 2015-06-14T20:56:52.570 回答
1

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

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

2：内部颜色可以是任何颜色，外部颜色为白色。每种颜色都可以单独透明。rgba (26,26,26,0) 70%, rgba (250, 250,250,0.6)

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

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

于 2015-06-17T18:22:51.997 回答