用CSS畫一個圓形

目前想到了兩種方法。

Border-Radius

這種是做用於元素自己的，很是常見。

border-radius: 50%;
height: 100px;
width: 100px;

Background

利用徑向漸變能夠獲得一個圓形擴散的背景，而後設置合適的大小，能夠獲得近似圓形的效果。

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;

注意不是完美的圓形，所以不宜過大。一個使用場景是，用於展現相似列表效果的長文本：

完整代碼以下：

background: radial-gradient(circle,#f00 47%,transparent 48%) 2px center/6px 6px no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding-left: 10px;

*Update: *這種效果不佳，如今推薦用list-style-image搭配svg實現。