<分区>
html - 圆形按钮上的线性渐变
让带有边框半径的按钮具有渐变效果的最佳方法是什么？
这应该是最终结果:
这是我要使用的线性渐变:
线性渐变(#FF6064, #FF9867)
任何有关解决此问题的最佳方法的指示都将非常适用。我在想我可能需要以某种方式屏蔽按钮下方的某些内容？
最佳答案
渐变边框很简单 - 只需使用例如 2px 填充和线性背景建立链接，并在内部跨度为白色背景。要用线性渐变填充文本，您可以使用一些我不确定是否适用于所有浏览器的东西。代码:
a {
display: inline-block;
padding: 2px;
background: linear-gradient(#FF6064, #FF9867);
border-radius: 20px;
}
a > span {
display: inline-block;
padding: 0 15px;
height: 40px;
line-height: 40px;
background: #fff;
border-radius: 18px;
}
a > span > span {
font-weight: bold;
background: linear-gradient(#FF6064, #FF9867);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<a href="#"><span><span>SOME TEXT</span></span></a>关于html - 圆形按钮上的线性渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46595689/