CSS3如何實現線性漸層效果
- 藏色散人原創
- 2018-11-28 11:17:026595瀏覽
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：如何使用CSS實現背景影像透明下一篇：如何使用CSS實現背景影像透明