CSS3實作線性漸變效果的方法:先建立一個HTML範例檔;然後在body中建立一個div;最後透過「linear-gradient」屬性實現線性漸變效果即可。
本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
CSS3是CSS(層疊樣式表)技術的升級版本。我們可以透過css3屬性實現更多酷炫的頁面效果,豐富網站內容,例如背景顏色呈現線性漸層的效果!
下面我們就來跟大家介紹一個常見的css3漸變效果。
首先大家要知道,CSS3 定義了兩種類型的漸變(gradients):線性漸層(Linear Gradients)和徑向漸層(Radial Gradients)。
本節先重點介紹線性漸變-Linear Gradients。
程式碼範例如下:
<!DOCTYPE> <html> <meta charset="utf-8"> <head> <title>CSS3创建CSS3如何實現線性漸層效果</title> <style type="text/css"> .container{ text-align:center; padding:20px 0; width:960px; margin: 0 auto; } .container div{ width:200px; height:150px; display:inline-block; margin:2px; color:#ec8007; vertical-align: top; line-height: 230px; font-size: 20px; } .linear{ background:linear-gradient(to bottom, #4b6c9c , #5ac4ed); } </style> </head> <body> <div class="container"> <div class="linear">Linear线性渐变</div> </div> </body> </html>
效果如下圖:
#上圖所示,就是由顏色#4b6c9c到#5ac4ed進行過渡的線性漸變。
或設定顏色從#9492ff到#ccccff過渡,效果如下:
#css3中的linear-gradient屬性就是表示用線性漸層創建影像。
預設情況下,linear-gradient線性漸層是從上到下開始過渡的。
當然漸層的方向也可以是,向下/向上/向左/向右/對角方向,以及定義一個角度(angle)。
其語法為:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
第一個參數表示線性漸變的方向,第二個參數表示開始過渡的顏色即起點顏色,第三個參數表示過渡到的顏色。
附註:Internet Explorer 9 及之前的版本不支援漸層。
這篇文章就是關於css3實現線性漸變效果的方法介紹,非常簡單易懂,希望對需要的朋友有所幫助!
以上是CSS3如何實現線性漸層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!