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：用於指定漸變的起始顏色