只有CSS径向透明中心

我已经创建了一个带有文字的div。我试图创建一个悬停函数，这将导致方形div有半透明的边缘。只有CSS径向透明中心

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

有没有办法，我可以“移除”中间的颜色，这样文字就会在中间可见，并且在白色边缘有透明度？

我问过，我听说有一种“覆盖”它的方法。不知道这是可能的。

我知道photoshop会是一个很好的选择。但我想看看是否有一种方法可以通过纯粹的CSS来实现这种效果。还是有没有更好的方法来制作带有透明边缘的盒子，比我缺少的径向渐变更实用？

2015-06-14 Metalbreath

像这样的事情

.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-14 20:56:52 vals

的其他方式。但我想我可以弄明白，如果我玩你的代码。基本上我的背景是灰色的。我希望div有白色的透明边缘。所以它可以看起来像“闪亮”的框。或交互式按钮。但是如果我把你的代码转过来，它应该工作:) – Metalbreath

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

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

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

第一种颜色将是完全透明的，所以背景将是可见的，并且白色将是半透明的，给出“闪亮“外观的边缘。 70％会告诉CSS其中第一颜色将结束（30％来自边界和边缘的距离）

我希望这将帮助周围的一些开发新手:)

来源

2015-06-17 18:22:51 Metalbreath

只有CSS径向透明中心

回答

相关问题