我试图使用线性渐变在纯 css 中复制此图像。
我尝试使用渐变色标,但所有颜色都在混合。有没有办法让线性渐变变得硬边?
我试过:
background-image: -webkit-linear-gradient(left, #252525 0%, #f5f5f5 20%, #00b7b7 40%,#b70000 60%, #fcd50e 80%);
而且也没有使用这些百分比,仍然是一样的。
最佳答案
为相邻色标指定相同的色标位置应该会产生硬边。标准的线性渐变语法允许颜色提示(减少这种背景样式的冗长),但并非所有浏览器似乎都支持它。
hr {
background-image: linear-gradient(to left, #252525 0%, #252525 20%, #f5f5f5 20%, #f5f5f5 40%, #00b7b7 40%, #00b7b7 60%, #b70000 60%, #b70000 80%, #fcd50e 80%);
height: 10px;
}
<hr>
关于css - css 中的硬边渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49635637/