使用-webkit-radial-gradient進行輝光

我試圖在自定義按鈕上實現懸停輝光（請參見下面的圖片）。我在Chrome中玩遊戲，無法通過-webkit-radial-gradient獲得任何類似的外觀。 enter image description here 使用-webkit-radial-gradient進行輝光

<html> 
    <head> 
    <style type="text/css"> 
     button { 
     margin-top: 20px; 
     width: 100px; 
     height: 32px; 
     border-style: solid; 
     border-width: 1px; 
     border-radius: 5px 5px 5px 5px; 
     border-color:#D95D00; 
     box-shadow: 0 0 4px #F3BB35 inset; 
     background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200)); 
     background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430)); 
     background: -webkit-gradient(linear, left bottom left top, from(#E97F2F), to(#F3BB35)); 
     } 
     button:hover { 
     background: -webkit-gradient(linear, left bottom, left top, from(#D95D00), to(#E6A200)); 
     background: -webkit-gradient(linear, left top, left bottom, from(#FFD266), to(#F28430)); 
     background-image: -webkit-radial-gradient(center, ellipse cover, #FFFFFF, #000); 
     } 
    </style> 
    </head> 
    <body> 
    <button>Hello</button> 
    </body> 
</html>

來源

2012-08-09 Vasya

你想讓按鈕本身'發光'，還是你想要一個邊緣發光的邊框？ – PhonicUK 2012-08-09 14:04:21

讓它發光。但似乎所有這些漸變是不好的主意，字體也不光滑。 – Vasya 2012-08-09 14:34:05

如果您因爲問題而置身於發光邊框，那麼您可以使用box-shadow屬性。 – PhonicUK 2012-08-09 14:51:30

它工作得很好用線性漸變。徑向梯度類似：dabblet。

你必須給你的background-image（漸變）一個大小（在任何單位）。然後你改變這些屬性中的一個或多個：

background-size: // to change the glow radius 
background-position: // to change the center of the glow, pretty much analogue to linear gradient 
background-color: // for partly transparent gradients

來源

2012-08-09 11:25:08

使用-webkit-radial-gradient進行輝光

回答

相關問題