如何使用 HTML5 和 CSS3 创建圆圈并设计圆圈样式？

在 HTML5 和 CSS3 中绘制圆圈

虽然 HTML5 和 CSS3 本身不支持直接绘制圆圈，但可以复制使用创新技术呈现圆形。

用圆角创建圆形角

要模拟圆形，您可以创建一个矩形元素并对其应用圆角。圆角的半径应该是要创建的圆所需宽度或高度的一半。

例如，以下代码创建一个直径为 50 像素的红色圆圈：

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

<div>
<p><strong>在圆圈内添加文本</strong></p>
<p>要在圆圈内添加文本，请定位文本元素绝对位于圆形容器内，并将其垂直和水平居中对齐。</p>
<pre class="brush:php;toolbar:false">#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div></div>