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);

}

應用在滾動加載條，網易地址導航欄頂部 等等