只有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徑向透明中心

回答

相關問題