浙公網(wǎng)安備33032602100516朝陽鄉(xiāng)如何利用css實現(xiàn)圓環(huán)效果
閱讀 18956 · 發(fā)布日期 2020-08-24 11:45 · 溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】
css實現(xiàn)圓環(huán)效果有多種方法，這里為大家分享五種方法：（推薦教程：CSS教程）首先我們來看一下實現(xiàn)效果：接下來為大家介紹方法：1、兩個標(biāo)簽的嵌套
.element1{
width: 200px;
height: 200px;
backgr... 【溫州小程序開發(fā),溫州微信公眾號,平陽做網(wǎng)站,平陽網(wǎng)站建設(shè)公司,平陽小程序商城制作,昆陽萬全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號,山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...
（推薦教程：
CSS教程）首先我們來看一下實現(xiàn)效果：
接下來為大家介紹方法：
1、兩個標(biāo)簽的嵌套
width: 200px;
height: 200px;
background-color: lightpink;
border-radius: 50%;
}
.child1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #009966;
position: relative;
top: 50px;
left: 50px;
}
2、使用偽元素，before／after.element2{
width: 200px;
height: 200px;
background-color: lightpink;
border-radius: 50%;
}
.element2:after{
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #009966;
position: relative;
top: 50px;
left: 50px;
}
3、使用border: .element3{
width: 100px;
height: 100px;
background-color: #009966;
border-radius: 50%;
border: 50px solid lightpink ;
}
（學(xué)習(xí)視頻推薦：
css視頻教程）4、使用border-shadow.element4{
width: 100px;
height: 100px;
background-color: #009966;
border-radius: 50%;
box-shadow: 0 0 0 50px lightpink ;
margin: auto;
}
.element5{
width: 200px;
height: 200px;
background-color: #009966;
border-radius: 50%;
box-shadow: 0 0 0 50px lightpink inset;
margin: auto;
}
5、使用radial-gradient.element6{
width: 200px;
height: 200px;
border-radius: 50%;
background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
}
以上就是如何利用css實現(xiàn)圓環(huán)效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
css 圓環(huán)效果本文轉(zhuǎn)載于：
csdn，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
CSS如何清除浮動？3種方法介紹
下一篇：
沒有了相關(guān)文章相關(guān)視頻如何使用源生css3實現(xiàn)圓環(huán)加載進(jìn)度條如何使用純CSS實現(xiàn)一個圓環(huán)旋轉(zhuǎn)錯覺的動畫效果（附...實現(xiàn)CSS圓環(huán)的5種方法(小結(jié))CSS3線性漸變實現(xiàn)4圓環(huán)相連（代碼實例）如何利用css實現(xiàn)圓環(huán)效果使用CSS3文本屬性使用CSS3過渡屬性使用CSS3動畫屬性
[做網(wǎng)站css教程]
width: 200px;
height: 200px;
background-color: #009966;
border-radius: 50%;
box-shadow: 0 0 0 50px lightpink inset;
margin: auto;
}
5、使用radial-gradient.element6{
width: 200px;
height: 200px;
border-radius: 50%;
background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
}
以上就是如何利用css實現(xiàn)圓環(huán)效果的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
css 圓環(huán)效果本文轉(zhuǎn)載于：
csdn，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
CSS如何清除浮動？3種方法介紹
下一篇：
沒有了相關(guān)文章相關(guān)視頻如何使用源生css3實現(xiàn)圓環(huán)加載進(jìn)度條如何使用純CSS實現(xiàn)一個圓環(huán)旋轉(zhuǎn)錯覺的動畫效果（附...實現(xiàn)CSS圓環(huán)的5種方法(小結(jié))CSS3線性漸變實現(xiàn)4圓環(huán)相連（代碼實例）如何利用css實現(xiàn)圓環(huán)效果使用CSS3文本屬性使用CSS3過渡屬性使用CSS3動畫屬性
