這篇文章將為大家詳細(xì)講解有關(guān)利用css實(shí)現(xiàn)圓環(huán)效果的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),額濟(jì)納網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:額濟(jì)納等地區(qū)。額濟(jì)納做網(wǎng)站價(jià)格咨詢:18980820575

css實(shí)現(xiàn)圓環(huán)效果有多種方法，這里為大家分享五種方法：

首先我們來看一下實(shí)現(xiàn)效果：

接下來為大家介紹方法：

1、兩個(gè)標(biāo)簽的嵌套

.element1{
            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%);
        }

關(guān)于利用css實(shí)現(xiàn)圓環(huán)效果的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱：利用css實(shí)現(xiàn)圓環(huán)效果的方法-創(chuàng)新互聯(lián)
URL標(biāo)題：http://weahome.cn/article/jpsdc.html