目錄

• 一、介紹
• 二、使用技巧
• 2.1 方格背景
• 2.2 棋盤(pán)效果

linear-gradient是css3的一個(gè)屬性，功能強(qiáng)大，但是因?yàn)槭褂玫撵`活性，讓沒(méi)接觸過(guò)的人感覺(jué)不好下手，下面來(lái)一起學(xué)習(xí)一下：

一、介紹

linear-gradient 是一種實(shí)現(xiàn)線性漸變的屬性，顧名思義，它的特點(diǎn)的是控制漸變，特點(diǎn)是線性的進(jìn)行控制。

屬性介紹：

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);

可以簡(jiǎn)化為：

1.關(guān)于控制線性變化的參數(shù)可以是多個(gè)，以逗號(hào)分隔
2.每一個(gè)控制線性變化的單元有兩部分組成
3.第一部分是線性變化的方向，有兩種形式：第一種形式是是角度，順時(shí)針增加，比較靈活；第二種形式是包含to和兩個(gè)關(guān)鍵詞：第一個(gè)指出水平位置left or right，第二個(gè)指出垂直位置top or bottom。關(guān)鍵詞的先后順序無(wú)影響，且都是可選的。to top, to bottom, to left 和 to right這些值會(huì)被轉(zhuǎn)換成角度0度、180度、270度和90度。其余值會(huì)被轉(zhuǎn)換為一個(gè)以向頂部中央方向?yàn)槠瘘c(diǎn)順時(shí)針旋轉(zhuǎn)的角度。這種相對(duì)于角度的設(shè)置，比較單一，只能設(shè)置8個(gè)方向（兩個(gè)是夾角方向）
4.第二部分是變化的顏色，默認(rèn)是漸變過(guò)程平分整個(gè)區(qū)域，可以以顏色 + 停止點(diǎn)的形式來(lái)設(shè)置某一個(gè)顏色變化的位置區(qū)間，這個(gè)也是支持多個(gè)，理論上沒(méi)有限制。

即linear-gradient(角度或者(to + 方向)， 顏色單元);

二、使用技巧

2.1 方格背景

線性漸變配合著backage-size有著意想不到的效果：

實(shí)現(xiàn)：

background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%),
linear-gradient(rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%);
background-size: 30px 30px;
background-color: white;
height: 200px;

2.2 棋盤(pán)效果

實(shí)現(xiàn)：

background-image: linear-gradient(45deg,#ccc 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#ccc 0),
linear-gradient(45deg,#ccc 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#ccc 0);
background-position: 0 0,-15px 15px,15px -15px,30px 30px;
background-size: 30px 30px;
background-color: white;

到此這篇關(guān)于CSS linear-gradient屬性案例詳解的文章就介紹到這了,更多相關(guān)CSS linear-gradient屬性內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！