CSS 视觉 - 圆

2019-07-19

描述

使用纯 CSS 创建一个圆形。

HTML

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

CSS

.circle {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background: #333;
}

Demo

说明

1. border-radius: 50% 弯曲一个元素的边来创造一个圆形
2. 由于一个圆从中心到边上的任意一点都有着相同长度的半径，因此他的 width 和 height 必须相等。否则的话将会创造出一个椭圆

浏览器支持

支持率：97.7%
支持情况：https://caniuse.com/#feat=border-radius

返回总目录

每天 30 秒系列之 CSS