使用css實(shí)現(xiàn)圓環(huán)，最簡(jiǎn)單的方式就是使用嵌套標(biāo)簽，設(shè)置border-radius就可以實(shí)現(xiàn)，但是這個(gè)是最簡(jiǎn)單的方式，這篇文章我們介紹5種方式實(shí)現(xiàn)圓環(huán)。

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

html代碼：

<div class="element1">
    <div class="child1">1</div>
</div>

css代碼：

        .element1{
            width: 200px;
            height: 200px;
            background-color: #40ff2e;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

頁(yè)面效果：

兩個(gè)div嵌套，外部div尺寸是內(nèi)部div的兩倍，設(shè)置border-radius為50%，同時(shí)內(nèi)部的div設(shè)置position為relative，相對(duì)本身偏移，向下偏移為本身高度的一半，向右偏移為本身高度的一半。

2.使用偽元素befor，after

html代碼：

<div class="element2"></div>

css代碼：

        .element2{
            width: 200px;
            height: 200px;
            background-color: #40ff2e;
            border-radius: 50%;
        }
        .element2:after{
            content: "2";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

頁(yè)面效果：

這個(gè)和方法一類似，設(shè)置元素后面設(shè)置一個(gè)偽元素，寬和高是前面元素的一半，同樣是設(shè)置position為relative，向右偏移為本身寬度的一半，向下偏移為高度的一半。

3.使用border

html代碼：

<div class="element3">3</div>

css代碼：

        .element3 {
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid #40ff2e;
        }

頁(yè)面效果：

這種方法的思路更簡(jiǎn)單，就是給元素設(shè)置一個(gè)比較寬的border，border的寬度是本身寬度的一半，這樣看上去就像是一個(gè)圓環(huán)。

4.使用border-shadow

html代碼：

<div class="element4">4</div>

css代碼：

        .element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px #40ff2e ;
            margin: auto;
        }

頁(yè)面效果：

這種方式的思路也是比較簡(jiǎn)單，只要知道box-shadow這個(gè)css屬性就可以了，這里設(shè)置元素的陰影尺寸是本身尺寸的一半。如下：

h-shadow：水平陰影的位置，允許負(fù)值，必須。
v-shadow：垂直陰影的位置，允許負(fù)值，必須。
blur：模糊距離，可選。
spread：陰影的尺寸，可選。
color：陰影的顏色，可選。
inset：將外部陰影改為內(nèi)部陰影，可選。

5. 使用radial-gradient

html代碼：

<div class="element5">5</div>

css代碼：

        .element5 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,#40ff2e 50%);
        }

頁(yè)面效果：

這里使用的是使用經(jīng)向漸變，同上也是要搞清楚radial-gradient這個(gè)css屬性：

shape：確定園的類型，ellipse：指定橢圓形的經(jīng)向漸變，circle：指定原型的經(jīng)向漸變。
size：定義漸變的大小，可能值：
farthest-corner (默認(rèn))：指定經(jīng)向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的角
closest-side：指定經(jīng)向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊
closest-corner：指定經(jīng)向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角
farthest-side：指定經(jīng)向漸變的半徑長(zhǎng)度為重圓心到離圓心最遠(yuǎn)的邊
position：定義漸變的位置，可能的值：
center：（默認(rèn)值）設(shè)置中間為經(jīng)向漸變圓心的縱向坐標(biāo)
top：設(shè)置頂部為經(jīng)向漸變圓心的縱向坐標(biāo)
bottom：設(shè)置底部為經(jīng)向漸變圓心的縱向坐標(biāo)
start-color, ..., last-color：用于指定漸變的起始顏色

總結(jié)

以上是生活随笔為你收集整理的css点滴3—5种方式实现圆环的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。