CSS repeating-linear-gradient线性渐

2019-02-23  本文已影响0人  ER_PM

学习最好的方法,就是把你知道的告诉别人

条纹

上面图片的样式我们应该怎么实现呢?
其实很简单,ta不就是黑黄-黑黄不断重复嘛,那我们可以给一个元素的背景渐变设置起始位置和结束位置的颜色值,然后把他们的终止位置又变成起始位置,这个过程不断重复即可。

repeating-linear-gradient函数就是干这事的专家:

background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );

下面代码有助于你的理解:
0px [黄色 -- 过渡 -- 黄色] 40px [黑色 -- 过渡 -- 黑色] 80px

上一篇下一篇

猜你喜欢

热点阅读