linear-gradient 的“高能”用法_ZenDei技術網路在線

說明：用線性漸變創建圖像語法： <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left |

首先，讓我們來瞭解一下“linear-gradient”的基本用法：

說明：用線性漸變創建圖像

語法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：

<angle>：用角度值指定漸變的方向（或角度）。

to left：設置漸變為從右到左。相當於: 270deg

to right：設置漸變從左到右。相當於: 90deg

to top：設置漸變從下到上。相當於: 0deg

to bottom：設置漸變從上到下。相當於: 180deg。這是預設值，等同於留空不寫。

<color-stop>：用於指定漸變的起止顏色：

<color>：指定顏色。

<length>：用長度值指定起止色位置。不允許負值

<percentage>：用百分比指定起止色位置。

其他知識點：

不知你是否註意到“第一個”語法後面的“+”號沒，這些符號（“?”、“+”、“*”）其實用法跟正則表達式很像，如果正則表達式不知道的請看下麵正解：

　　,：代表每個屬性之間的分隔符號。

　　?：代表“屬性”可以出現零次或一次，也就是可有可無

　　+：代表“屬性”可以出現一次或多次，但是必須出現一次

　　*：代表“屬性”可以出現零次或多次。

　　|：代表可以從多個“屬性”中任選一個。

　　||：代表“屬性”可以是左邊的一個或是右邊的一個，或是兩個都行

　　[]：代表裡面是“屬性”或“屬性”集合

　　<>：這個不是正則表達式裡面的，但是它代表定義的取值範圍，如上語法的“<angle>”，取值的裡面就會附帶說明這個“<angle>”是幹嘛的

　　{1,4}：代表“屬性”最少出現一次，最多出現四次。“1”和“4”都是動態的值，不是固定的，根據描述而定

來看看基本用法實例：

　　(圖1)

　　linear-gradient(#fff, #333);

　　linear-gradient(to bottom, #fff, #333);

　　linear-gradient(to top, #333, #fff);

　　linear-gradient(180deg, #fff, #333);

　　linear-gradient(to bottom, #fff 0%, #333 100%);

　　以上這五句樣式都可以實現（圖1）的漸變效果

再來看看複雜點的普通實例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta charset="utf-8" />
 5 　　<title></title>
 6 　　<style>
 7 　　　　div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd;}
 8 　　　　.test { background: linear-gradient(#fff, #333);}
 9 　　　　.test2 { background: linear-gradient(#000, #f00 50%, #090);}
10 　　　　.test3 { background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);}
11 　　　　.test4 { background: linear-gradient(45deg, #000, #f00 50%, #090);}
12 　　　　.test5 { background: linear-gradient(to top right, #000, #f00 50%, #090);}
13 　　</style>
14 </head>
15 <body>
16 　　<div class="test"></div>
17 　　<div class="test2"></div>
18 　　<div class="test3"></div>
19 　　<div class="test4"></div>
20 　　<div class="test5"></div>
21 </body>
22 </html>

View Code

效果圖：

再讓我們看看“高能”的用法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style>
 7         body{ background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #99958%, transparent 62%), #444; background-size: 16px 48px;}
 8     </style>
 9 </head>
10 <body>
11 </body>
12 </html>

View Code

效果圖：

怎麼樣，效果是不是很酷炫？再瞧瞧其他的：

還有更多好看的就不展示了，源自國外大牛：http://lea.verou.me/css3patterns/#chocolate-weave

其中的幾個重要知識點總結：

■Ⅰ.“background”的繪製順序是從後面的開始向前面的繪製的，百說不如一慄：

1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;

background繪製時是從“linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753”繪製到...頭部的“linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0)”漸變樣式。所以這“點”要註意了。

■Ⅱ.每一個使用“linear-gradient”繪製出來的漸變效果，都可以看作是一張背景圖。因為，這個可以在“background-size”里設置（每個背景圖的大小用逗號“,”區分）。

■Ⅲ.【非常重要】，製作複雜的背景圖並不難，但是你得知道“background-repeat”的原理就是每一張背景圖都按照你設定的“屬性”去繪製。如果你不知道這個原理，甚至沒註意到。那麼當你第一次看到這麼漂亮的背景效果，想自己動手豐衣足食的時候卻發現，“What is this？”，看看我第一次寫的背景效果。

第一次寫的：

理想樣子：

實際樣式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7 body{
 8     background:linear-gradient(to right, transparent 0%, #F00 0%, #F00 100%, transparent 100%) 25px 25px,
 9     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),
10     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),
11     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);
12     
13     background-color:#FFF;
14     background-size:25px 25px, 50px 50px, 50px 50px, 50px 50px;
15     background-repeat:repeat;
16 }
17 </style>
18 </head>
19 <body>
20 </body>
21 </html>

View Code 效果圖：

⊙︿⊙ 好桑心，怎麼整個網頁紅色的？

其實這其中就是“background-repeat”的原理問題：每個圖片都是x、y複製繪製的“background-repeat:repeat”，所以當“background-size”不是一致的時候，複製繪製的位置也是不一樣的。

知道是這個原因了，改動一下。

正確的樣式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7 body{
 8     background:linear-gradient(135deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%) 25px 25px,
 9     linear-gradient(315deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%),
10     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),
11     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),
12     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);
13     
14     background-color:#FFF;
15     background-size:50px 50px;
16     background-repeat:repeat;
17 }
18 </style>
19 </head>
20 <body>
21 </body>
22 </html>

View Code

效果圖：

知道原理才是硬道理 ╰(￣▽￣)╮