用Css如何制作圓形？

網頁開發中，經常會用到一些小圖標，比如一些箭頭之類的，圓形圖標也是經常用到的，很多時候這些圖標都是直接使用圖片來處理。<br/>我們這里介紹一下用css來制作圓形圖標，而不是用圖片。下面一起看下。

操作方法

01
首先看下我們的html代碼，很簡單，就是一個div，用這個div來呈現一個圓，
<div class="css_yuan"></div>
02
然后是css樣式代碼，代碼里關鍵是通過樣式中的border-radius來讓div呈現圓形，因為邊角的弧度足夠大，就會顯示成一個圓了
.css_yuan{
background-color: #69c51b;
border-radius: 30px;
height: 60px;
width: 60px;
}
03
看下頁面效果，一個標準的圓。
04
通過設置不同的長度和寬度，我們可以生成不同大小的圓。我們加多一個div顯示另一個更大的圓，樣式如圖，二者樣式不同的地方是width和height的值不一樣。還有border-radius也不同，大一點的圓，邊角弧度肯定要更大一點，才會顯示為圓了。
<div class="css_yuan"></div>
<div class="css_yuan2"></div>
05
看下這二個圓的顯示效果。
06
除了大小可以更改，顏色也是可以更改的，我們的圓的顏色主要是取決于div的背景色。所以改變這個背景色就行了。
我們這里把大圓的背景色改一下。
background-color: #F0951C;
07
效果如圖，css制作的圓可以很方便的更改大小，顏色。而以圖片制作的圓要更改的話，就只能重新制作圖片了。
End