问使用-webkit-radial gradient用于光晕
EN

Stack Overflow用户

提问于 2012-08-09 19:05:51

回答 1查看 947关注 0票数 0

我正在尝试在自定义按钮上实现悬停发光(见图)。下面)。我使用的是Chrome浏览器，但无法使用-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>

css

webkit

回答 1

Stack Overflow用户

发布于 2012-08-09 19:25:09

它在处理线性梯度时效果很好。径向梯度是相似的：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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11882023

复制

相似问题

问使用-webkit-radial gradient用于光晕
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-radial gradient用于光晕EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-radial gradient用于光晕
EN