專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時(shí)間：2021-04-01 17:27:55 來源：動(dòng)力節(jié)點(diǎn) 瀏覽1641次
CSS顏色漸變能夠使我們開發(fā)的頁面的背景顏色在兩個(gè)或多個(gè)顏色之間平滑過渡。CSS流行之前，必須使用圖像實(shí)現(xiàn)這些效果。然而, 通過使用CSS漸變可以減少下載時(shí)間和帶寬的使用.。此外，縮放的元素在縮放時(shí)看起來更好，因?yàn)闈u變是由瀏覽器生成的。本文我們就來細(xì)聊一些CSS漸變的相關(guān)知識。
CSS漸變分為線性漸變和徑向漸變2種，下面我們來一一介紹。
要?jiǎng)?chuàng)建線性漸變，必須定義至少兩個(gè)顏色停止。顏色停止是你想要渲染平滑過渡之間的顏色。你還可以設(shè)置一個(gè)起始點(diǎn)和一個(gè)方向（或角度）和漸變效果。
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
??<meta charset="UTF-8">
??<title>項(xiàng)目</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); /* 標(biāo)準(zhǔn)語法 (必須是最后一個(gè)) */
????}
</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); /* 標(biāo)準(zhǔn)語法 (必須是最后一個(gè)) */
????}
</style> ???
可以通過指定水平和垂直起始位置來實(shí)現(xiàn)對角線漸變。
下面的示例顯示從左上角開始的線性漸變（到右下角）。它開始紅色，過渡到黃色:
<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); /* 標(biāo)準(zhǔn)語法(必須是最后一個(gè)) */
????}
</style>
徑向漸變是由其中心定義的。
要?jiǎng)?chuàng)建徑向漸變，還必須定義至少兩個(gè)停止顏色。
語法
background: radial-gradient(shape size at position, start-color, ..., last-color);徑向漸變-均勻的間隔停止顏色 (默認(rèn))
下面的示例顯示一個(gè)徑向漸變，其顏色間隔均勻:
#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 */
}
徑向漸變-不同間隔的停止顏色
下面的例子顯示了一個(gè)具有不同間距的顏色漸變的徑向漸變:
#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漸變的兩種方法各有千秋，但都是為了前端開發(fā)頁面的顏色實(shí)現(xiàn)漸變的效果，從而提升頁面的豐富性。在本站的CSS教程中對CSS控制頁面的其他屬性的方式也都有提及，想學(xué)習(xí)的小伙伴可以輕松學(xué)會，設(shè)計(jì)出屬于自己的優(yōu)秀的頁面。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號