我需要一个简单的按钮与颜色梯度和一个透明的梯度停留伪造一个眩光。在过去的日子里，我只创建了一个按钮与颜色梯度 （红色到暗红色） 和设置一个层与透明梯度 （白色，与不透明度0.25至0.50） 超过按钮。
喜欢此按钮：
但是我有一个凹地平线的大问题：
我在这里用一条理论上的线标记它，只是为了更好地理解。
fiddle试用码：
我在这里尝试了一些凹面背景设置，但是没有透明的历史记录。
#wrapper {
background: grey;
padding: 25px;
}
#test {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 25px;
border-radius: 20px;
background: #888888;
background:
radial-gradient(circle 400px at 50% 266%, rgba(0,0,250,0.1), rgba(0,0,250,0.1) 100%, red 100%);
background-size:200px 200px, 200px 200px;
background-position:0 0,0 0;
background-repeat:no-repeat;
}<div id="wrapper">
<div id="test">B1</div>
<div id="test">B2</div>
</div>但是我的CSS 2技能已经完全过时了。因此问题是是否有更好的解决方案来解决我的财务按钮。
有没有人知道我如何创建这样一个按钮 （就像第一张图片中的红色按钮）？现在可能有更现代和更简单的解决方案。-重要的是地平线是凹*（横向向下）* 而不是凸 （中间向下的椭圆）。完全如图所示。
我必须处理更多的CSS-3和最新的技术来提高我的技能。
2条答案
按热度按时间piztneat1#
您可以使用一个元素和径向渐变来完成此操作。
6rqinv9w2#
你可以叠加多个渐变，一个在另一个的上面。我使用了一个透明的圆形径向渐变来淡出按钮，然后在它下面放一个线性渐变。然后你可以使用CSS自定义属性来设置按钮的颜色。下面的代码。在rgba（）属性中调整不透明度值来获得你想要的效果。
已编辑因为半径不能是百分比值，我使用了自定义属性，按钮半径随按钮大小缩放，因此您可以使用不同宽度的按钮，它会按比例放大。