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

標籤：ima   允許   技術分享   image   ott   pre   center   width   比較   

 

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

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