《CSS3實戰》筆記--漸層設計（一)

最後更新：2016-12-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

基於CSS的漸層與圖片漸層相比，最大的優點是便於修改，同時支援無級縮放，過渡更加自然。目前，實現CSS漸層的只有基於Webkit和Gecko引擎的瀏覽器，基於Presto引擎的Opera瀏覽器暫時不支援漸層，基於Trident的IE雖然可以通過濾鏡的方式實現，但並不提倡。

Webkit引擎（Safari 4及以上版本）的CSS漸層設計

基本文法：

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

參數說明：

<type>:定義漸層類型，包括線性漸層（linear）和放射狀漸層（radial）。

<point>:定義漸層起始點和結束點座標，即開始應用漸層的x軸和y軸座標，以及結束漸層的座標。該參數支援數值，百分比和關鍵字，如（0，0）或者（left，top）等。關鍵字包括top，bottom，left和right。

<radius>:當定義放射狀漸層時，用來設定放射狀漸層的長度，該參數為一個數值。

<stop>:定義漸層色和步長。包括三個類型值，即開始的顏色，使用from （color value）函數定義；結束的顏色，使用to（color value）函數定義：顏色步長，使用color-stop（value，color value）定義。color-stop（）包含兩個參數值，第一個參數值為一個數值或者百分比值，取值範圍為0~1.0（或者0%~100%），第二個參數值表示任意顏色值。

直線漸層基本用法：

/*簡單的線性漸層背景色，從頂部到底部，從藍色向紅色漸層顯示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));

示範效果：

/*從頂部到中間，再從中間到底部，從藍色到綠色，再到紅色漸層顯示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));

示範效果：

/*設計二重漸層，從頂部到底部，先是從藍色到白色漸層顯示，再從黑色到紅色漸層顯示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));

示範效果：

/*通過設定不同的步長值，從而設計多重漸層效果，從頂部到底部，先是從藍色到白色漸層，再從百色到黑色漸層，最後是從黑色到紅色漸層顯示*/background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));

示範效果：

小結：color-stop（）函數包含兩個參數值，第一個參數值指定角標位置，第二個參數指定色標顏色。一個漸層可以包含多個色標，位置值為0~1之間的小數，或者0~100%之間的百分數，指定色標的位置比例。

放射狀漸層的基本用法

/*同心圓（圓心座標為200，100），內圓半徑為10，外圓半徑為100，內圓小於外圓半徑，從內圓紅色到外圓綠色放射狀漸層，超過外圓半徑顯示為綠色，內圓顯示紅色*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));

效果顯示：

/*同心圓（圓心座標為200，100），內圓半徑為100，外圓半徑為100，內圓小於外圓半徑，從內圓紅色到外圓綠色放射狀漸層。當內圓和外圓半徑相等時，則漸層無效*/background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));

示範效果：

/*同心圓（圓心座標為200，100），內圓半徑為100，外圓半徑為10，內圓大於外圓半徑，從內圓紅色到外圓綠色放射狀漸層，超出內圓半徑顯示為紅色，外圓顯示綠色*/
background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));

示範效果：

/*非同心圓，內圓圓心和外圓圓心的距離小於兩圓半徑的差，則顯示效果，呈現錐形放射狀漸層效果。錐形的尖銳性與兩圓圓心距離成正比*/background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));

示範效果：

/*同心圓，在內圓到外圓中間90%的位置，即距離外環內添加一個藍色色標，設計多層放射狀漸層，如所示。*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));

示範效果：

/*通過設定to()函數的顏色值為透明，可以設計發散的圓形效果*/background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));

示範效果：

/*通過設定to（）函數的顏色值為透明，同時設計相似色，可以設計球形效果*/background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));

示範效果：

/*通過為背景圖定義多個放射狀漸層，可以設計多個氣泡效果，如所示*/background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;

示範效果：

漸層應用定義漸層效果的邊框

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的漸層實現方法</title><style type="text/css">div { border-width: 20px; width: 400px; height: 200px; margin: 20px; -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;}</style></head> <body><div></div></body></html>

示範效果：

定義填充內容效果

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的漸層實現方法</title><style type="text/css">.div1 { width:400px; height:200px; border:10px solid #A7D30C; background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)); float:left;}.div1::before { width:400px; height:200px; border:10px solid #019F62; content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62)); display: block;}</style></head> <body><div class="div1">透視框</div></body></html>

顯示效果：

定義列表表徵圖

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Webkit引擎的漸層實現方法</title><style type="text/css">ul { list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))}</style></head> <body><ul> <li>新聞清單項目1</li> <li>新聞清單項目2</li> <li>新聞清單項目3</li> <li>新聞清單項目4</li></ul></body></html>

示範效果：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More