gpt4 book ai didi

html - CSS 渐变 - 颜色中断太多

转载 作者:行者123 更新时间:2023-12-03 21:13:58 27 4
gpt4 key购买 nike

我遇到了 css 线性渐变的问题。我希望以特定百分比进行干净的颜色中断。但是当我添加超过一定数量时,它似乎开始模糊颜色:

这是具有“太多”颜色中断的 css 渐变示例 - 并且在不应该的地方模糊:

div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}
<div></div>


这是一个例子,它有足够的颜色中断,所以它不会模糊:

div {
height: 100px;
background-color: red;
background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%)
}
<div></div>

最佳答案

在这种情况下,最好使用多重渐变:

div {
height: 100px;
background:
/* Color position /width height */
linear-gradient(#03aeef,#03aeef) 50% 0 / 5% 100%, /* top layer */
linear-gradient(#fff,#fff) 50% 0 / 10% 100%,
linear-gradient(#03aeef,#03aeef) 87% 0 / 5% 100%,
linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5% 100%,
linear-gradient(#fff,#fff) 95% 0 / 15% 100%,
linear-gradient(#042750,#042750) right / 60% 100%; /* bottom layer */
background-repeat:no-repeat;
}
<div></div>

关于html - CSS 渐变 - 颜色中断太多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61874386/

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