CSS：多種方法畫圓

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

 .myDiv {
   width: 100px;
   height: 100px;
 }

方法一：border-radius

.circle {
  background-color: seagreen;
  border-radius: 50%;
}

方法二：clip-path

.circle {
   background-color: seagreen;
   clip-path: circle();
 }

方法三：svg background

.circle{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%25' cy='50%25' r='50%25' fill='seagreen'/%3E%3C/svg%3E");
}

🔧 url 解碼工具：http://tool.chinaz.com/tools/urlencode.aspx

data 類型的 url：

• data:,<文本數據>
• data:text/plain,<文本數據>
• data:text/html,<HTML代碼>
• data:text/html;base64,<base64編碼的HTML代碼>
• data:text/css,<CSS代碼>
• data:text/css;base64,<base64編碼的CSS代碼>
• data:text/javascript,<Javascript代碼>
• data:text/javascript;base64,<base64編碼的Javascript代碼>
• data:image/gif;base64,base64編碼的gif圖片數據
• data:image/png;base64,base64編碼的png圖片數據
• data:image/jpeg;base64,base64編碼的jpeg圖片數據
• data:image/x-icon;base64,base64編碼的icon圖片數據

data 格式的 url 最直接的好處是，這些 url 原本會引起一個新的網絡訪問，因爲那裏是一個網頁的地址，現在不會有新的網絡訪問了，因爲現在這裏是網頁的內容。這樣做會減少服務器的負載，但同時也增加了當前網頁的大小，而且不會緩存圖片。對 “小” 數據特別有好處。

方法四：radial-gradient

.circle{
  background: radial-gradient(seagreen 70%, transparent 70%);
}

radial-gradient：徑向漸變色。

方法五：僞元素 + font

.circle::after {     /* 用 ::before 也可以 */
    content: "●";
    color: seagreen;
    font-size: 8vw;  /* 字體實際大小 */
    line-height: 1;
}

方法六：mix-blend-mode

.circle{
  background: seagreen;
}
.circle::after {
    content: "";
    display: block;
    width: 8vw;
    height: 8vw;
    mix-blend-mode: lighten;
    background: radial-gradient(#000 70%, #fff 70%);
  }

mix-blend-mode 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。

方法六效果圖：

左上角爲綠色，其它部分爲黑色的原因：

沒有加 ::after 時，效果是這樣的：

而 ::after 的作用是畫了一個黑色（background: radial-gradient(#000 70%, #fff 70%);控制顏色）的圓，由於 mix-blend-mode: lighten; 的混合方式，最終呈現這樣的效果。