您好,登錄后才能下訂單哦!
CSS3實(shí)現(xiàn)徑向漸變效果的方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
用css3實(shí)現(xiàn)背景漸變效果,可以豐富我們網(wǎng)頁的內(nèi)容,也提升用戶視覺效果。當(dāng)然更重要的是,提高用戶體驗(yàn)!我們可以使用css3中的radial-gradient屬性實(shí)現(xiàn)徑向漸變效果。
那么我們在前面的文章中,已經(jīng)給大家介紹了CSS3實(shí)現(xià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)的角落。
感謝各位的閱讀!看完上述內(nèi)容,你們對CSS3實(shí)現(xiàn)徑向漸變效果的方法大概了解了嗎?希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。