CSS SNIPPET

  返回

用纯CSS画圆  视觉效果

用纯CSS创建一个圆形。

HTML
<div class="circle"></div>
CSS
.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}
效果演示
代码说明
  • border-radius: 50% 弯曲元素的边框,从而创建一个圆。
  • 由于在圆上任何给顶点都有相同的半径 ,因此widthheight 必须相同。 如果宽度和高度不同,那么将创建出椭圆。
浏览器支持

100.0%