只用 CSS 来创建圆。
- 可以使用
border-radius: 50%弯曲元素的边缘来创建圆。 - 因为圆在任一点上都的半径都相同，所有元素的
width和height必须一样，否则所创建的就是个椭圆。
预览
HTML
<div class="circle"></div>CSS
.circle {
border-radius: 50%;
width: 4rem;
height: 4rem;
background: #0f8bdac7;
}只用 CSS 来创建圆。
border-radius: 50% 弯曲元素的边缘来创建圆。width 和 height 必须一样，否则所创建的就是个椭圆。
<div class="circle"></div>.circle {
border-radius: 50%;
width: 4rem;
height: 4rem;
background: #0f8bdac7;
}