溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CSS3實現徑向漸變效果的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
用css3實現背景漸變效果，可以豐富我們網頁的內容，也提升用戶視覺效果。當然更重要的是，提高用戶體驗！我們可以使用css3中的radial-gradient屬性實現徑向漸變效果。
那么我們在前面的文章中，已經給大家介紹了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實現徑向漸變效果的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
