溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)css中背景顏色線性漸變和徑向漸變效果的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、線性漸變（linear-gradient）
實(shí)現(xiàn)線性漸變，至少需要定義兩種顏色，這兩種顏色就是你想平穩(wěn)過渡的顏色，即：其中一種顏色為起點(diǎn)，另一種顏色為結(jié)束點(diǎn)。
語法：
background: linear-gradient(colorA,colorB)
colorA為起點(diǎn)顏色，colorB為結(jié)束點(diǎn)顏色。
還可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，又或者是從左上角至右下角漸變（默認(rèn)情況下是從上至下漸變的）。
語法：
background: linear-gradient(direction,colroA,colorB)
direction表示漸變的方向，直接寫方向的起點(diǎn)即可，比如：漸變方向?yàn)閺淖笾劣?，直接寫left即可；漸變方向?yàn)閺南轮辽?，直接寫bottom即可；漸變方向從左上角至右下角，書寫為background: linear-gradient(left top,colorA,colorB)。
css線性漸變案例
舉例：從左下角至右上角，從紅色到藍(lán)色的漸
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background: -webkit-linear-gradient(left bottom,red,blue);
background: -o-linear-gradient(left bottom,red,blue);
background: -moz-linear-gradient(left bottom,red,blue);
background: linear-gradient(left bottom,red,blue);
}
</style>
</head>
<body>
<div></div>
</body>
</html>二、徑向漸變（radial-gradient）
CSS3徑向漸變是圓形或橢圓形的漸變。顏色不再沿著一條直線軸變化，而是從一個起點(diǎn)向所有方向發(fā)射。它比線性漸變更復(fù)雜。
可以定義它的中心(默認(rèn)漸變是中心是center)、形狀（原型或者橢圓形）、大小等。
語法：background: radial-gradient(position,shape，size,start-color,last-color)
position
<length>：用長度值指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)?？梢詾樨?fù)值。
<percentage>：用百分比指定徑向漸變圓心的橫坐標(biāo)或縱坐標(biāo)?？梢詾樨?fù)值。
left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。
center：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值或縱坐標(biāo)。
right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。
top：設(shè)置頂部為徑向漸變圓心的縱標(biāo)值。
bottom：設(shè)置底部為徑向漸變圓心的縱標(biāo)值。
shape
可以是值 circle 或 ellipse。circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。
size
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角；默認(rèn)值
css徑向漸變案例
舉例：從60%，55%的位置開始漸變，指定徑向漸變的半徑長度為從圓心到離圓心最近的邊，從內(nèi)向外漸變顏色為blue,green,yellow,black
效果圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
</style>
</head>
<body>
<div></div>
</body>
</html>關(guān)于“css中背景顏色線性漸變和徑向漸變效果的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼