如何使用 CSS 绘制一个圆形？

推荐答案

// www.javascriptcn.com code example
/* 方法一：利用 border-radius 属性 */
.circle-1 {
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

/* 方法二：利用椭圆 border-radius */
.circle-2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50px; /* 如果是正方形，也可以写成 50% */
}

本题详细解读

理解 border-radius 属性

border-radius 属性允许你设置元素边框的圆角半径。 当一个元素的高度和宽度相等时，如果 border-radius 的值设置为元素高度或宽度的一半（或 50%），那么该元素将会变成一个圆形。

方法一：border-radius: 50%

• 原理: 当 border-radius 的值为 50% 时，表示圆角半径为元素宽度或高度的一半。
• 适用场景: 这是最常用且最简洁的方法，适用于任何宽高相同的正方形元素。
• 代码解释:
  • width: 100px; height: 100px;： 定义了一个 100px * 100px 的正方形。
  • background-color: red;：设置背景颜色为红色，方便查看。
  • border-radius: 50%;：关键属性，设置圆角半径为 50%，将正方形变为圆形。

方法二：border-radius: 半径值

• 原理: 当 border-radius 的值为一个具体的长度值（比如 50px）时，它表示圆角半径的具体数值，当长度值等于元素宽度的一半（或高度的一半）时，如果元素宽高相等，也能形成圆形。
• 适用场景: 适用于明确知道半径具体数值的情况，同样适用于任何宽高相同的正方形元素。
• 代码解释:
  • width: 100px; height: 100px;： 定义了一个 100px * 100px 的正方形。
  • background-color: blue;：设置背景颜色为蓝色，方便查看。
  • border-radius: 50px;：关键属性，设置圆角半径为 50px，即宽高的一半，同样将正方形变为圆形。如果宽高不相等，则会变成椭圆。

额外说明

• 如果元素的宽高不相等，则使用 border-radius: 50% 或 border-radius: length 将会形成椭圆，而不是圆形。
• 可以使用 border-radius 的简写形式来定义多个角的圆角，但这不适用于圆形，这里只关注如何绘制圆形。
• 可以通过调整 width 和 height 的值来调整圆形的大小。