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,
• data:text/html;base64,
• data:text/css,
• data:text/css;base64,
• data:text/javascript,
• data:text/javascript;base64,
• 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; 的混合方式，最终呈现这样的效果。