語(yǔ)法：
<linear-gradient>：linear-gradient([<point>,]?<color-stop>[,<color-stop>]+);
<point>：[ left | right ]? [ top | bottom ]? ||<angle>?
<color-stop>：<color>[<length>|<percentage>]?
線性漸變? 默認(rèn)從上往下 （to bottom）??示例：
角度值與方向值的轉(zhuǎn)換：
關(guān)于漸變中的百分比：
上圖 可以看出未設(shè)置顏色百分比的情況下 兩個(gè)顏色著色區(qū)域都相當(dāng) 漸變模糊區(qū)域也是沿高度對(duì)半劃分
上圖 可以看出設(shè)置了漸變的百分比 第一個(gè)顏色參數(shù)是沿頂部0開始著色20%? 第二個(gè)顏色參數(shù)為50% 是沿頂部50%的處開始著色 漸變區(qū)域?yàn)?0%-20%=30%??
上圖可以看出 當(dāng)后面的顏色參數(shù)百分比 小于前一個(gè)參數(shù)顏色百分比的時(shí)候 將默認(rèn)前一個(gè)百分比并開始著色 相當(dāng)于?linear-gradient(green 50%, red 50%) 就沒有漸變區(qū)域了
應(yīng)用場(chǎng)景：
思路：設(shè)置卡片的背景圖片 因linear-gradient 是background-image的屬性（這里和卡片背景沖突）所以用偽元素設(shè)置一個(gè)長(zhǎng)寬和卡片容器一樣的盒子 并設(shè)置其background-image屬性為linear-gradient(to bottom right,transparent 90%,red 10%)大猛；最后將“vip”定位到卡片容器位置即可
思路：設(shè)置進(jìn)度條深色背景色? 并設(shè)置linear-gradient 為淺色與透明色的隔斷漸變 再用animation 與 @keyframes 設(shè)置動(dòng)畫過(guò)渡
思路：采用repeating-linear-gradient? 再指定background-size大小?
例如?
上圖設(shè)置： background-size：25px 25px?
