美文网首页
CSS repeating-linear-gradient线性渐

CSS repeating-linear-gradient线性渐

作者: ER_PM | 来源:发表于2019-02-23 12:17 被阅读0次

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

    条纹

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

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

    background: repeating-linear-gradient(
          45deg,
          yellow 0px,
          yellow 40px,
          black 40px,
          black 80px
        );
    
    • 角度就是渐变的方向
    • 渐变颜色,由颜色值和起始值 到 颜色值和终止值组成,位置值可以使用px值和百分比值来表示,位置的起始值和终止值代表渐变发生的宽度,repeating-linear-gradient函数会循环执行这个过程,让元素生成有规则的条纹。

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

    相关文章

      网友评论

          本文标题:CSS repeating-linear-gradient线性渐

          本文链接:https://www.haomeiwen.com/subject/ikwuyqtx.html