CSS：没有过渡的渐变？

我想用两种不同的颜色做一个简单的酒吧。我想要的是第一种颜色停止，第二种颜色开始时没有过渡或渐变。我知道这听起来很愚蠢，没有梯度的梯度

CSS

 -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 60px,rgba(27,151,143,1) 100%);

它会产生非常接近的结果，但是在两种颜色相遇的地方会变得模糊，因为它仍然在进行过渡/渐变

---

如果这是一个术语，有没有办法做完美的止损

这是我最喜欢的CSS渐变生成器工具。有一个像photoshop这样的可视化编辑器，它会弹出CSS供您复制和粘贴

---

这是我最喜欢的CSS渐变生成器工具。有一个像photoshop这样的可视化编辑器，它会弹出CSS供您复制和粘贴

很快，应该是：

而对于chrome，它需要过泡以避免模糊污损：

很快，它应该是：

而对于chrome，它需要过泡以避免模糊污损：

---

你已经有了一个无过渡梯度，因为白色的末端和绿色的开始都是60px。所以，你不能用这种方式做得更好

左边的方式是多背景方式：

div.grad {
    height: 100px;
    background: linear-gradient(to top, white, white), rgb(27,151,143);
    background-size: 100% 60px;
    background-position: left top;
    background-repeat: no-repeat;
}

---

顺便说一句，我已经将线性渐变改为无前缀版本，在大多数现代浏览器中都是这样工作的

您已经有了一个无过渡渐变，因为白色的结尾和绿色的开头都是60px。所以，你不能用这种方式做得更好

左边的方式是多背景方式：

div.grad {
    height: 100px;
    background: linear-gradient(to top, white, white), rgb(27,151,143);
    background-size: 100% 60px;
    background-position: left top;
    background-repeat: no-repeat;
}

---

顺便说一句，我已经将线性渐变改为无前缀版本，在大多数现代浏览器中都是这样工作的

检查它们是否有你想要的样式。@Paulie\u D检查它们是否有你想要的样式。@Paulie\u D Jeez！这就是我使用的，甚至没有意识到我可以选择另一个选项！谢谢你指出这一点！！！天哪！这就是我使用的，甚至没有意识到我可以选择另一个选项！谢谢你指出这一点！！！

div.grad {
    height: 100px;
    background: linear-gradient(to top, white, white), rgb(27,151,143);
    background-size: 100% 60px;
    background-position: left top;
    background-repeat: no-repeat;
}