使用-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进行辉光

回答

相关问题