如何使用 HTML 和 CSS 创建圆？

在 HTML 页面上绘制圆形

无法直接使用 HTML5 和 CSS3 创建圆形元素。但是，可以采用一种技术来创建视觉上类似于圆形的元素。

创建圆角矩形

模拟圆形的关键是创建矩形有圆角。 CSS 中的 border-radius 属性允许我们定义角的曲率。

确定半径

为了实现完美的圆形，border-radius 值应该等于矩形宽度或高度的一半。这可确保角充分向内弯曲以产生圆形的印象。

示例代码

考虑以下创建圆形元素的代码片段：

<div>
<pre class="brush:php;toolbar:false">#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

在此示例中，我们创建一个宽度和高度均为 50 像素的矩形。 border-radius 值设置为 25 像素，即矩形宽度/高度的一半。这会产生一个带有红色填充的圆形形状。