用css如何製作圓環？

HTML開發中，我們可以用圖片製作圖標，也可以用CSS來生成一些簡單的圖標，比如正方形，三角形，圓形等等。
但可以生成圓環嗎？不能直接生成，但可以通過間接的方法來生成，我們可以通過二個圓來完成。

操作方法

（01）看下我們例子的html代碼，如圖，很簡單，就是一個大的div，包含二個div。<div class="yuan_huan"> <div class="yuan1"></div> <div class="yuan2"></div> </div>

（02）看下css樣式yuan1， yuan2的定義，如圖，主要是通過設置border-radius來讓div顯示成圓形。

（03）先看下現在的顯示效果，就是二個大小不一的圓。

（04）把二個圓重疊起來，組成一個圓環。我們修改下yuan1, yuan2的樣式代碼，如圖，讓二個圓都是絕對定位，position: absolute;並且設置yuan1的z-index: 2; 讓他顯示在大圓的上面。

（05）再加上大div的樣式，如圖，主要是要讓二個圓的位置，是相對這個大div來説的。

（06）現在的效果如圖，還需要調整下小圓的位置。

（07）改下小圓yuan1的樣式代碼，調整顯示位置，主要是設置樣式中的 left, top值，如圖

（08）現在的效果，就是一個圓環了。

（09）把小圓的背景色改成和頁面的背景色一樣，就是一個很標準的圓環了。background-color: lightblue;再看下效果，