同心圆环

                                                      

---

<div class="circle"></div>

.circle{
    width:200px;
    height:200px;
    border-radius:100px;
    box-sizing:border-box;
    border:50px double black;
}

说明：

    box-sizing:border-box; 让边框也包含在所设置的width和height中。这样画圆方便。

    border-radius:100px;  画圆弧的半径。相邻边框的内切圆的半径。

（下图，圆的半径为border-radius  能得到正方形的内切圆，除去外切角，得到一个圆。其实是分别在左上、右上、右下、左下画了一个内切圆，只是刚好重合而已。）

                                 

注意：

同心圆环，看着是两个圆环组成，忽然想着是否可以一个div变现出来。只是感觉这个圆环很好看，所以才记录下来的。