CSS3 漸變（Gradients）之CSS3 線性漸變

2024-07-11 08:25:44

字體：大中小

來源：轉載

供稿：網友

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

CSS3 定義了兩種類型的漸變（gradients）：

-----線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向

-----徑向漸變（Radial Gradients）- 由它們的中心定義

CSS3 線性漸變

為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。

語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

（1）、線性漸變 - 從上到下（默認情況下）

下面的實例演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：

XML/HTML Code復制內容到剪貼板

<!DOCTYPE html> <html>
<head> <style>
#grad1 { height: 200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 標準的語法（必須放在最后） */
} </style>
</head> <body>
<h3>線性漸變 - 從上到下</h3> <p>從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：</p>
<div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>
</body> </html>

（2）、線性漸變 - 從左到右

下面的實例演示了從左邊開始的線性漸變。起點是紅色，慢慢過渡到藍色：

上一篇：超酷炫 CSS3垂直手風琴菜單

下一篇：20個非常實用的CSS技巧

發表評論

共有條評論