CSS3如何實現線性漸層效果
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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？
Apr 05, 2025 pm 05:51 PM
關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...
