css画圆

作者：_永恒灬莫言发布日期:2026-05-16 浏览:39

/* 使用 CSS 绘制一个圆形 */

/* 定义一个 div 元素 */
.circle {
  width: 100px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  background-color: red; /* 设置背景颜色 */
  border-radius: 50%; /* 将元素变为圆形，关键属性 */
}

/* 如果需要在 HTML 中使用这个样式，可以这样写： */
/*
<div class="circle"></div>
*/

解释说明：

width 和 height 设置了圆的大小。为了确保是正圆，宽度和高度应相等。
background-color 设置了圆的背景颜色。
border-radius: 50% 是将元素变为圆形的关键属性。它会将元素的四个角变成弧形，当宽度和高度相等时，就会形成一个完美的圆形。

上一篇：css设置边框

下一篇：css动画keyframes