如何使用 HTML 和 CSS 创建圆形元素？

使用 HTML 和 CSS 创建圆形元素

在 HTML5 和 CSS3 中绘制圆形需要一种解决方法，因为这些技术缺乏对圆形形状的本机支持。但是，您可以通过创建带圆角的矩形来模拟圆形。

边框半径：圆角的关键

要创建圆角，您需要利用 CSS 的 border-radius 属性。通过将其值设置为所需圆的宽度和高度的一半，您可以实现半圆形。

例如，直径为50px的圆需要边框-半径为 25 像素：

#circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
}

添加文本Inside

要将文本放置在模拟圆圈内，请将文本括在

<div> 内。元素：

<div>