css3實作色彩漸層效果的方法:可以利用linear-gradient函數和radial-gradient函數分別實現線性漸變效果和徑向漸層效果,如【linear-gradient(yellow, green)】。
css3漸層有兩種:css3線性漸層和css3徑向漸層。
(學習影片分享:css影片教學)
一、線性漸層色彩漸層
函數:
linear-gradient () 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。
語法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
值:
direction 以角度值指定漸層的方向(或角度)。
color-stop1, color-stop2,... 用來指定漸層的起止色。
範例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> #grad1{ height: 200px; background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */ background: linear-gradient(yellow, green)); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>线性渐变 - 从上到下</h3> <div id="grad1"></div> </body> </html>
二、徑向漸層
函數;
radial-gradient() 函數用徑向漸層創建"圖像"。
徑向漸層由中心點定義。
為了創造徑向漸層你必須設定兩個終止色。
語法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
值:
#1、shape 決定圓的型別
ellipse (預設): 指定橢圓形的徑向漸層。
circle :指定圓形的徑向漸層
2、size 定義漸層的大小,可能值:
#farthest-corner (預設) : 指定徑向漸層的半徑長度為從圓心到離圓心最遠的角
closest-side :指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner : 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
#farthest-side :指定徑向漸層的半徑長度為從圓心到離圓心最遠的邊
3、position 定義漸層的位置。可能值:
center(預設):設定中間為徑向漸層圓心的縱座標值。
top:設定頂部為徑向漸層圓心的縱座標值。
bottom:設定底部為徑向漸層圓心的縱座標值。
4、start-color, ..., last-color 用來指定漸層的起止顏色。
範例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> #grad1{ height: 150px; width: 200px; background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */ background: radial-gradient(orange, yellow, pink); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>径向渐变</h3> <div id="grad1"></div> </body> </html>
相關推薦:CSS教學
以上是css3如何實現顏色漸層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!