css點滴3—5種方式實現圓環

 

使用css實現圓環，最簡單的方式就是使用嵌套標籤，設置border-radius就能夠實現，可是這個是最簡單的方式，這篇文章咱們介紹5種方式實現圓環。

1.兩個標籤嵌套

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;
        }

頁面效果：

 

兩個div嵌套，外部div尺寸是內部div的兩倍，設置border-radius爲50%，同時內部的div設置position爲relative，相對自己偏移，向下偏移爲自己高度的一半，向右偏移爲自己高度的一半。

 

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;
        }

頁面效果：

這個和方法一相似，設置元素後面設置一個僞元素，寬和高是前面元素的一半，一樣是設置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;
        }

頁面效果：

這種方法的思路更簡單，就是給元素設置一個比較寬的border，border的寬度是自己寬度的一半，這樣看上去就像是一個圓環。

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;
        }

頁面效果：

這種方式的思路也是比較簡單，只要知道box-shadow這個css屬性就能夠了，這裏設置元素的陰影尺寸是自己尺寸的一半。以下：

h-shadow：水平陰影的位置，容許負值，必須。
v-shadow：垂直陰影的位置，容許負值，必須。
blur：模糊距離，可選。
spread：陰影的尺寸，可選。
color：陰影的顏色，可選。
inset：將外部陰影改成內部陰影，可選。

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

頁面效果：

這裏使用的是使用經向漸變，同上也是要搞清楚radial-gradient這個css屬性：

shape：肯定園的類型，ellipse：指定橢圓形的經向漸變，circle：指定原型的經向漸變。size：定義漸變的大小，可能值：farthest-corner (默認)：指定經向漸變的半徑長度爲從圓心到離圓心最遠的角closest-side：指定經向漸變的半徑長度爲從圓心到離圓心最近的邊closest-corner：指定經向漸變的半徑長度爲從圓心到離圓心最近的角farthest-side：指定經向漸變的半徑長度爲重圓心到離圓心最遠的邊position：定義漸變的位置，可能的值：center：（默認值）設置中間爲經向漸變圓心的縱向座標top：設置頂部爲經向漸變圓心的縱向座標bottom：設置底部爲經向漸變圓心的縱向座標start-color, ..., last-color：用於指定漸變的起始顏色