学习css3之repeating-linear-gradient

作者 likaiqiang 日期 2019-07-28
学习css3之repeating-linear-gradient
background:linear-gradient(-45deg,black 0,black 25px,yellow 25px,yellow 75px) top left;

上面这条渐变我的本意是黑黄两种颜色循环出现,黑的高为25px,黄的高为50px。可实际结果呢

黄色会直接延伸到梯度线的末尾。。。

渐变既然是背景,是特殊的图像,那么可不可以利用background-size与repeat平铺生成循环背景呢。

且不说它奇怪的平铺结果,貌似还是不连续的。你可以利用初中几何知识算出background-size为多少时平铺的图像是连续的。这里的结果为:

Math.sqrt( (25*2)*(25*2)/2 )

有没有更简单的方法,总不能每次都开根号吧。当然有,那就是今天的主角repeating-linear-gradient

是不是so easy!!!