溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關如何實現CSS3線性漸變效果，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
CSS3是CSS（層疊樣式表）技術的升級版本。我們可以通過css3屬性實現更多炫酷的頁面效果，豐富網站內容，比如背景顏色呈線性漸變的效果！
下面我們就給大家介紹一個常見的css3漸變效果。
首先大家要知道，CSS3 定義了兩種類型的漸變（gradients）：線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）。
本節先重點介紹線性漸變-Linear Gradients。
代碼示例如下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>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線性漸變效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
