推薦參考學習：《CSS3教程》
那么我們在前面的文章中，已經給大家介紹了CSS3實現線性漸變效果。
下面我們就通過簡單的示例繼續給大家介紹css3實現徑向漸變的效果。
所謂徑向漸變（Radial Gradients）就是由它們的中心開始定義。
代碼示例如下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>CSS3創建徑向漸變效果示例</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);
在默認情況下，徑向漸變的方式是顏色節點均勻分布，漸變的形狀是橢圓形。
那么實現一個徑向漸變，你至少要設置兩種不同的顏色。當然你可以自定義漸變的中心以及形狀。
注：
漸變的中心是 center，表示在中心點；
漸變的形狀是 ellipse，表示橢圓形；
漸變的大小是 farthest-corner，表示到最遠的角落。
本篇就是關于CSS3實現徑向漸變效果的方法介紹，也是非常的簡單易懂，希望對需要的朋友有所幫助！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
