推薦參考學(xué)習(xí)：《CSS3教程》
那么我們?cè)谇懊娴奈恼轮?，已?jīng)給大家介紹了CSS3實(shí)現(xiàn)線性漸變效果。
下面我們就通過簡(jiǎn)單的示例繼續(xù)給大家介紹css3實(shí)現(xiàn)徑向漸變的效果。
所謂徑向漸變（Radial Gradients）就是由它們的中心開始定義。
代碼示例如下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>CSS3創(chuàng)建徑向漸變效果示例</title>
<style type="text/css">
.container{
text-align:center;
padding:20px 0;
width:960px;
margin: 0 auto;
}
.container div{
width:200px;
height:150px;
display:inline-block;
margin:2px;
color:#ec8007;
vertical-align: top;
line-height: 230px;
font-size: 20px;
}
.radial{
background:radial-gradient(#4b6c9c,#5ac4ed);
}
</style>
</head>
<body>
<div class="container">
<div class="radial">Radial徑向漸變</div>
</div>
</body>
</html>漸變效果如下圖：
圖中漸變的效果就是從中心處由顏色#4b6c9c過渡到顏色#5ac4ed。
上圖是由顏色#ff5309過渡到#efdf0e。
radial-gradient屬性語法：
background: radial-gradient(center, shape size, start-color, ..., last-color);
在默認(rèn)情況下，徑向漸變的方式是顏色節(jié)點(diǎn)均勻分布，漸變的形狀是橢圓形。
那么實(shí)現(xiàn)一個(gè)徑向漸變，你至少要設(shè)置兩種不同的顏色。當(dāng)然你可以自定義漸變的中心以及形狀。
注：
漸變的中心是 center，表示在中心點(diǎn)；
漸變的形狀是 ellipse，表示橢圓形；
漸變的大小是 farthest-corner，表示到最遠(yuǎn)的角落。
本篇就是關(guān)于CSS3實(shí)現(xiàn)徑向漸變效果的方法介紹，也是非常的簡(jiǎn)單易懂，希望對(duì)需要的朋友有所幫助！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
