專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-04-01 17:27:55 來源：動力節點 瀏覽1318次
CSS顏色漸變能夠使我們開發的頁面的背景顏色在兩個或多個顏色之間平滑過渡。CSS流行之前，必須使用圖像實現這些效果。然而, 通過使用CSS漸變可以減少下載時間和帶寬的使用.。此外，縮放的元素在縮放時看起來更好，因為漸變是由瀏覽器生成的。本文我們就來細聊一些CSS漸變的相關知識。
CSS漸變分為線性漸變和徑向漸變2種，下面我們來一一介紹。
要創建線性漸變，必須定義至少兩個顏色停止。顏色停止是你想要渲染平滑過渡之間的顏色。你還可以設置一個起始點和一個方向（或角度）和漸變效果。
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
??<meta charset="UTF-8">
??<title>項目</title>
</head>
<body>
??<div id="grad1"></div>
</body>
</html>
例如：
顯示從頂部開始的線性漸變。它從開始的紅色，過渡到黃色:
<style>
????#grad1 {
????????height: 200px;
????????background: blue; /* 對于那些不支持漸變的瀏覽器 */
????????background: -webkit-linear-gradient(blue, yellow); /* Safari 5.1 到 6.0 */
????????background: -o-linear-gradient(blue, yellow); /* Opera 11.1 到 12.0 */
????????background: -moz-linear-gradient(blue, yellow); /* Firefox 3.6 到 15 */
????????background: linear-gradient(blue, yellow); /* 標準語法 (必須是最后一個) */
????}
</style>
例如：
顯示從左開始的線性漸變。它從開始的紅色，過渡到黃色
<style>
????#grad1 {
????????height: 200px;
????????background: blue; /* 對于那些不支持漸變的瀏覽器 */
????????background: -webkit-linear-gradient(left, blue , yellow); /* Safari 5.1 到 6.0 */
????????background: -o-linear-gradient(right, blue, yellow); /* Opera 11.1 到 12.0 */
????????background: -moz-linear-gradient(right, blue, yellow); /* Firefox 3.6 到 15 */
????????background: linear-gradient(to right, blue , yellow); /* 標準語法 (必須是最后一個) */
????}
</style> ???
可以通過指定水平和垂直起始位置來實現對角線漸變。
下面的示例顯示從左上角開始的線性漸變（到右下角）。它開始紅色，過渡到黃色:
<style>
????#grad1 {
????????height: 200px;
????????background: blue; /*對于那些不支持漸變的瀏覽器 */
????????background: -webkit-linear-gradient(left top, blue, yellow); /* Safari 5.1 到 6.0 */
????????background: -o-linear-gradient(bottom right, blue, yellow); /* Opera 11.1 到 12.0 */
????????background: -moz-linear-gradient(bottom right, blue, yellow); /* Firefox 3.6 到 15 */
????????background: linear-gradient(to bottom right, blue, yellow); /* 標準語法(必須是最后一個) */
????}
</style>
徑向漸變是由其中心定義的。
要創建徑向漸變，還必須定義至少兩個停止顏色。
語法
background: radial-gradient(shape size at position, start-color, ..., last-color);徑向漸變-均勻的間隔停止顏色 (默認)
下面的示例顯示一個徑向漸變，其顏色間隔均勻:
#grad {
??background: blue; /* ?browsers that do not support gradients */
??background: -webkit-radial-gradient(blue, yellow, green); /* Safari 5.1 到 6.0 */
??background: -o-radial-gradient(blue, yellow, green); /* ?Opera 11.6 到 12.0 */
??background: -moz-radial-gradient(blue, yellow, green); /* ?Firefox 3.6 到 15 */
??background: radial-gradient(blue, yellow, green); /* Standard syntax */
}
徑向漸變-不同間隔的停止顏色
下面的例子顯示了一個具有不同間距的顏色漸變的徑向漸變:
#grad {
??background: blue; /*不支持漸變的瀏覽器 */
??background: -webkit-radial-gradient(blue 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
??background: -o-radial-gradient(blue 5%, yellow 15%, green 60%); /* ?Opera 11.6-12.0 */
??background: -moz-radial-gradient(blue 5%, yellow 15%, green 60%); /* ?Firefox 3.6-15 */
??background: radial-gradient(blue 5%, yellow 15%, green 60%); /* Standard syntax */
}
總的來說，CSS漸變的兩種方法各有千秋，但都是為了前端開發頁面的顏色實現漸變的效果，從而提升頁面的豐富性。在本站的CSS教程中對CSS控制頁面的其他屬性的方式也都有提及，想學習的小伙伴可以輕松學會，設計出屬于自己的優秀的頁面。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號