個視頻我們來寫兩個圓環。這個圓環雖然看起來只是普普通通的兩個圓，但是認真一看好像又沒那么簡單，因為它是交錯重疊起來的，并且還有一點陰影的效果，看起來比較真實。這個案例其實是UTube上面一個比較知名博主的教學案例，我們不妨來學習一下。

可能很多人也看過，我們今天主要來實現這兩個圓環重疊的部分，陰影的部分比較簡單，大家可以自己去思考一下。html里面這兩個div就是這兩個圓環，樣式現在寫了一些基本的樣式，其它樣式重新來寫。

·先來把這兩個圓環的基礎樣式寫出來，兩個圓有了，然后把其中一個變成紅色，再讓它們先簡單的重疊一下，控制一下第二個圓環，調整一下它的邊框顏色就可以了，把它變成紅色。

·再往左邊移動60像素，先簡單重疊起來。現在兩個圓只是簡單的重疊，我們要怎么樣實現這種交錯重疊？就好像兩個圓環是穿起來的這種感覺。這里分別給這兩個圓環加個偽元素，我們是可以通過定位把一個盒子撐起來的。

·這里給它設置一下inset，關鍵就是inset設置為多少合適。如果是設置為0，也就是四個方向都是設為0，按道理應該是和父元素完全重疊的(沒border的話)。

·加個邊框看一下，很明顯它并沒有和白色圓環完全重疊，而是在它里面。這是因為我們看到的這兩個圓環，看到的只是border邊框的區域。inset的設置為0，它只不過是貼在content內容區域里面，所以偽元素我們要把它擴大才可以。

·這里要調整一下inset的值，0是剛好貼滿content的區域，設置為正值它是收縮的，所以這里設置為-25px。現在和白色的圓環就一樣大了，只不過一個正方形一個圓形，等一下把偽元素調整成圓的就可以了。

·然后單獨來設置一下上邊框，同樣也是白色的邊框，還有右邊框也單獨設置一下。ok，再把另外兩條邊框設置為透明。現在左邊和下邊就看不到了，再把它設置成一個圓，這樣它就可以和第一個圓環完全重疊起來了。

·現在偽元素這半個圓環就和本來的圓環完全重疊起來，那有什么用？還是和原來的一樣，但是現在就可以單獨給偽元素這半個圓環設置層級了，把層級調高一點，這樣這一段圓環它就可以蓋在上面，然后再給它旋轉一下位置，讓它旋轉負的四十五度，這樣兩個圓環貫穿重疊起來的效果就完成了。

其實就是借助了一個偽元素做了一個障眼法，如果想實現圓環交匯的地方有點陰影的效果，也可以多寫兩個偽元素來實現，這個大家可以自己來思考一下。

這個視頻就到這里，感謝大家的收看。

近在做一小程序，看有的APP上表示完善度的進度環不錯，想在小程序和網站上實現，又想盡量不增加加載時間，這里弄了個純CSS的，在小程序和網站上都跑通了，參考了網上的一些個例子，這里總結一下

HTML:

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(--9deg);"></div><!--9deg 從左到右數 -135到45，一共180度-->

</div>

<div class="text">7<br>完善度</div>

</div>

<div class="blockOut0">

<div class="blockOut">

<div class="block" style="transform: rotate(9deg);"></div>

<!--從左到右讀數 -135到45，一共180度-->

</div>

<div class="text">8<br>完善度</div>

</div>

CSS:

.blockOut0 { width: 40px; height: 40px; position: relative; overflow:hidden; margin:20px auto}

.block { width: 40px; height: 40px; border-left:4px solid #f60; border-top:4px solid #f60; border-right:4px solid #ccc; border-bottom:4px solid #ccc; border-radius: 50%; box-sizing: border-box;}

.blockOut { width: 40px; height:20px; overflow: hidden;}

.text { text-align: center; top: 8px; position: absolute; width: 100%; color:#f60; font-size:9px}