css(linaer-gradient)

由沿直线两种或多种颜色之间的渐进转换的图像。它的结果是数据类型的对象，这是一种特殊的类型.

与任何梯度同样，线性梯度没有内在维度 ; 即，它没有自然或优选的尺寸，也没有优选的比例。其具体尺寸将与其适用的元素大小相匹配。

要建立重复的线性渐变以填充其容器，请改用该repeating-linear-gradient()函数。

<div class="colorr">

 </div>

css样式

.colorr {
            width: 150px;
            height: 100px;
            border: 1px red solid;
            background: linear-gradient(1deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%);
        }

显示结果:

类推:

<div class="color1">

    </div>
    <div class="color2">

    </div>

css代码

 .color1{ width: 150px; height: 150px; background: linear-gradient(red,green); } .color2{ width: 150px; height: 150px; background: linear-gradient(0.25turn,skyblue,yellow) }

显示结果

经过linear-gradient实现简单的隔行变色

<div class="one"> 你是我年少最大的欢喜 我最喜欢的年少只有你 任你怎么说 怎么沉默 都只有你 </div>

css代码

 .one { width: 150px; line-height: 30px; background-image: linear-gradient(rgba(53, 100, 0, 0.3)50%, rgba(1, 6, 6, 0.5)50%); background-size: 100% 60px; }

而后最终就成了隔行变色的效果了

值的一说的是,若是把css里的百分比改一下就能实现渐变色的效果,是否是很炫酷!

 

 

###新增

斜向条纹：

.linearOblique{

    margin-top:10px;

    width:200px;

   height: 200px;

   background:repeating-linear-gradient(45deg,#fb3,#58a 30px);

}

应用在滚动加载条，网易地址导航栏顶部 等等