使用css實現圓環，最簡單的方式就是使用巢狀標籤，設定border-radius就可以實現，但是這個是最簡單的方式，這篇文章我們介紹5種方式實現圓環。
1.兩個標籤巢狀
html**：
<css**：div
class
="element1"
>
<
div
class
="child1"
>1
div>
div>
.element1.child1頁面效果：
兩個div巢狀，外部div尺寸是內部div的兩倍，設定border-radius為50%，同時內部的div設定position為relative，相對本身偏移，向下偏移為本身高度的一半，向右偏移為本身高度的一半。
2.使用偽元素befor，after
html**：
<css**：div
class
="element2"
>
div>
.element2.element2:after頁面效果：
這個和方法一類似，設定元素後面設定乙個偽元素，寬和高是前面元素的一半，同樣是設定position為relative，向右偏移為本身寬度的一半，向下偏移為高度的一半。
3.使用border
html**：
<css**：div
class
="element3"
>3
div>
.element3頁面效果：
這種方法的思路更簡單，就是給元素設定乙個比較寬的border，border的寬度是本身寬度的一半，這樣看上去就像是乙個圓環。
4.使用border-shadow
html**：
<css**：div
class
="element4"
>4
div>
.element4頁面效果：
這種方式的思路也是比較簡單，只要知道box-shadow這個css屬性就可以了，這裡設定元素的陰影尺寸是本身尺寸的一半。如下：
h-shadow：水平陰影的位置，允許負值，必須。
v-shadow：垂直陰影的位置，允許負值，必須。
blur：模糊距離，可選。
spread：陰影的尺寸，可選。
color：陰影的顏色，可選。
inset：將外部陰影改為內部陰影，可選。
5. 使用radial-gradient
html**：
<css**：div
class
="element5"
>5
div>
.element5頁面效果：
這裡使用的是使用經向漸變，同上也是要搞清楚radial-gradient這個css屬性：
shape：確定園的型別，ellipse：指定橢圓形的經向漸變，circle：指定原型的經向漸變。
size：定義漸變的大小，可能值：
farthest-corner (預設)：指定經向漸變的半徑長度為從圓心到離圓心最遠的角
closest-side：指定經向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner：指定經向漸變的半徑長度為從圓心到離圓心最近的角
farthest-side：指定經向漸變的半徑長度為重圓心到離圓心最遠的邊
position：定義漸變的位置，可能的值：
center：（預設值）設定中間為經向漸變圓心的縱向座標
top：設定頂部為經向漸變圓心的縱向座標
bottom：設定底部為經向漸變圓心的縱向座標
start-color, ..., last-color：用於指定漸變的起始顏色
css實現進度圓環
圓環實現原理 1.左邊乙個扇形 右邊乙個扇形組成乙個圓環的圓圈 2.clip裁剪左扇形和右扇形，使其變為圓環形式 3.隱藏圓圈容器的左半邊，只顯示右半邊，讓左扇形向右開始逐步旋轉，通過轉動左扇形，隱藏右扇形，使左扇形旋轉到右邊顯示，從而展現圓環進度50 以內的視覺效果 4.當左扇形旋轉回左邊後，右邊...
實現CSS圓環的5種方法 小結
想到去年面試實習的時候被問到實習圓環的問題，特意寫篇文章總結一下吧！總結了一下大概有5種方法。1.兩個標籤的巢狀 element1 child1 2.使用偽元素，before after element2 element2 after 3.使用border element3 4.使用border s...
實現CSS圓環的5種方法 小結
這篇文章主要介紹了實現css圓環的5種方法 小結 有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。想到去年面試實習的時候被問到實習圓環的問題，特意寫篇文章總結一下吧！總結了一下大概有5種方法。1.兩個標籤的巢狀 element1 child12.使用偽元素，before after ...