|
導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立... 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。 css3中的漸變效果，包括線性漸變、徑向漸變、重復(fù)線性漸變以及重復(fù)徑向漸變。這些漸變效果，可以使我們的網(wǎng)頁內(nèi)容更加豐富炫彩。
推薦學(xué)習(xí)：《CSS3教程》 那么在前面的文章中，我們已經(jīng)給大家介紹了css3實(shí)現(xiàn)線性漸變效果、徑向漸變效果以及重復(fù)線性漸變效果。 下面我就結(jié)合簡單的示例繼續(xù)給大家介紹css3實(shí)現(xiàn)重復(fù)徑向漸變的方法。 代碼示例如下： <!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<title>CSS3創(chuàng)建重復(fù)徑向漸變效果示例</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;
}
.repeating-radial{
background:repeating-radial-gradient(#4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
}
</style>
</head>
<body>
<div class="container">
<div class="repeating-radial">重復(fù)徑向漸變</div>
</div>
</body>
</html>重復(fù)徑向漸變效果如下：
如上圖所示，從中心開始顏色從#4b6c9c過渡到#5ac4ed，再從白色過渡到白色。于是就形成上圖中藍(lán)白條間隔的重復(fù)漸變效果。
上圖是從#9492ff過渡到顏色#ccccff的重復(fù)徑向漸變。 這里需要注意的就是，函數(shù)repeating-radial-gradient() 的使用。 repeating-radial-gradient()函數(shù)創(chuàng)建一個(gè)從原點(diǎn)輻射的重復(fù)漸變組成的<image> 。 repeating-radial-gradient()的語法與radial-gradient()相同。 本篇文章就是關(guān)于CSS3實(shí)現(xiàn)重復(fù)徑向漸變效果的方法介紹，非常的簡單，希望對需要的朋友有所幫助！ 以上就是CSS3怎么實(shí)現(xiàn)重復(fù)徑向漸變效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時(shí)通知我們(peng896066052@126.com),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
