gpt4 book ai didi

css - 使用 -webkit-radial-gradient 发光

转载 作者:行者123 更新时间:2023-11-28 13:45:54 27 4
gpt4 key购买 nike

我正在尝试在自定义按钮上实现悬停发光(见下图)。我在 Chrome 中玩游戏,无法通过 -webkit-radial-gradient 获得任何类似的外观。 enter image description here

<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>

最佳答案

它与线性渐变效果很好。径向渐变类似: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

关于css - 使用 -webkit-radial-gradient 发光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11882023/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com