溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css徑向漸變的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
css徑向漸變的使用方法：首先創(chuàng)建一個(gè)HTML示例文件；然后創(chuàng)建一個(gè)div塊；最后通過(guò)添加css樣式為“background:radial-gradient()”來(lái)實(shí)現(xiàn)徑向漸變效果即可。
徑向漸變(radial gradients)：從起點(diǎn)到終點(diǎn)顏色從內(nèi)而外沿進(jìn)行圓形漸變。
語(yǔ)法
background:radial-gradient(center,shape size,start-color,……,last-color);
徑向漸變-設(shè)置形狀
語(yǔ)法：
background:radial-gradient(shape,start-color,……,last-color);
說(shuō)明：
shape值可以取兩個(gè)
circle——圓形
ellipse——橢圓(默認(rèn))
徑向漸變-尺寸大小關(guān)鍵字
尺寸大小關(guān)鍵字是確定結(jié)束顏色的位置，默認(rèn)值為farthest-corner。
語(yǔ)法
background:radial-gradient(size,start-color,……,last-color);
size取值為以下四個(gè)關(guān)鍵字：
closest-side:最近邊
farthest-side:最遠(yuǎn)邊
closest-corner:最近角
farthest-corner：最遠(yuǎn)角
實(shí)例：
div {
width: 300px;
height: 200px;
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: radial-gradient(30% 70%, farthest-side, blue, green, yellow, black);
}徑向漸變-圓心位置
語(yǔ)法：
background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
注意：圓心位置的標(biāo)準(zhǔn)語(yǔ)法目前主流瀏覽器支持性較差，需要注意加瀏覽器前綴。
一般使用時(shí)的方式：
-webkit-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color); -o-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color); -moz-background:radial-gradient(level-percent vertical-percent,start-color,……,last-color); background:radial-gradient(level-percent vertical-percent,start-color,……,last-color);
思考：1、漸變中顏色后面百分比值有何含義?
3-12編程練習(xí)
小伙伴們，學(xué)習(xí)了CSS3徑向漸變，根據(jù)效果圖，補(bǔ)充代碼，實(shí)現(xiàn)：
(1)以中心(60% 40%)為起點(diǎn)，設(shè)置圓心到最近邊、最圓邊、最近角、最圓角的四種徑向漸變效果。
(2)徑向漸變的形狀是圓形
(3)顏色由里到外分別是紅、黃、綠、藍(lán)
效果圖如下
任務(wù)
給4個(gè)元素分別設(shè)置背景顏色徑向漸變
(1)分別設(shè)置徑向漸變大小為最近邊、最遠(yuǎn)邊、最近角、最遠(yuǎn)角
(2)漸變的圓心為60%和40%
(3)漸變的形狀為圓形
(4)漸變的顏色由里到外依次為紅、黃、綠、藍(lán)。
參考代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>徑向漸變</title>
<style>
div {
width: 200px;
height: 300px;
float: left;
margin: 100px 0 0 100px;
}
/* 補(bǔ)充代碼，分別寫出4個(gè)元素的背景漸變效果 */
.div1 {
background: -webkit-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: radial-gradient(60% 40%,closest-side circle, red,yellow,green,blue);
}
.div2 {
background: -webkit-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: radial-gradient(60% 40%,farthest-side circle, red,yellow,green,blue);
}
.div3 {
background: -webkit-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: radial-gradient(60% 40%,closest-corner circle, red,yellow,green,blue);
}
.div4 {
background: -webkit-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: radial-gradient(60% 40%,farthest-corner circle, red,yellow,green,blue);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>徑向漸漸-重復(fù)漸變
background:repeating-radial-gradient(color1 length|percent,color2 length|percent,……);
3-14編程練習(xí)
小伙伴們，我們學(xué)習(xí)了CSS3徑向漸變中的重復(fù)漸變，接下來(lái)，根據(jù)效果圖寫出代碼，實(shí)現(xiàn)以元素中心為原點(diǎn)進(jìn)行多個(gè)彩虹球的重復(fù)徑向漸變。
(1)要求彩虹的7個(gè)顏色，取值范圍從0%開(kāi)始，一次加5%，比如紅色是0%，橙色是5%，黃色是10%，依次類推
(2)提示：彩虹球的顏色，用英語(yǔ)單詞表示即可
(3)效果圖如下：
參考代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>徑向漸變</title>
<style>
div {
width: 400px;
height: 400px;
/* 補(bǔ)充代碼 */
background: -webkit-repeating-radial-gradient(closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient( closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(closest-side circle,red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
/* 標(biāo)準(zhǔn)的語(yǔ)法 */
background: repeating-radial-gradient( closest-side circle, red 0%,orange 5%,yellow 10%,green 15%,blue 20%,indigo 25%,purple 30%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>以上是“css徑向漸變的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼