我有问题,使所有的条纹在这个渐变相同的大小;最下面的那个比其余的大。有什么办法可以防止这种情况发生吗?
null
#flag {
width:1000px;
height:600px;
background-image:linear-gradient(to bottom,
#6E0E2E,
#6E0E2E 16%,
#2A0614 16%,
#2A0614 32%,
#BE1864 32%,
#BE1864 48%,
#00923C 48%,
#00923C 64%,
#1C562E 64%,
#1C562E 80%,
#00FECA 80%,
#00FECA 96%
);
}
<div id="flag"></div> <!-- flag -->
null
考虑使用calc()
以获得精确的结果,并避免处理浮点数:
null
#flag {
width:1000px;
height:600px;
background:
linear-gradient(180deg,
#6E0E2E 0 calc(1*100%/6),
#2A0614 0 calc(2*100%/6),
#BE1864 0 calc(3*100%/6),
#00923C 0 calc(4*100%/6),
#1C562E 0 calc(5*100%/6),
#00FECA 0 calc(6*100%/6));
}
<div id="flag">
</div> <!-- flag -->