当前位置：首页 > 前端开发 > 正文

如何用HTML画一个圆框？

admin
前端开发
2025-07-05
3910

在HTML中创建圆框可使用CSS的border-radius属性，为元素设置宽度、高度和边框样式后，将border-radius值设为50%即可生成正圆形边框，或使用像素值制作圆角矩形。

在HTML中绘制圆框（圆角矩形或圆形）主要通过CSS的border-radius属性实现,以下为详细方法及代码示例：

基础实现：圆角矩形（带边框的圆框）

<div class="rounded-box">这是一个圆角矩形框</div>
<style>
.rounded-box {
  width: 200px;
  height: 100px;
  border: 2px solid #3498db; /* 边框颜色 */
  border-radius: 15px;       /* 圆角半径 */
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
}
</style>

效果说明：

如何用HTML画一个圆框？第1张

border-radius: 15px 控制四个角的弧度（值越大越圆润）
边框通过border属性定义（可自定义颜色/粗细）区域用padding控制内边距

进阶技巧：正圆形框

<div class="circle-box">圆形</div>
<style>
.circle-box {
  width: 150px;
  height: 150px;          /* 宽高相等 */
  border: 3px solid #e74c3c;
  border-radius: 50%;     /* 关键属性 */
  display: flex;
  justify-content: center;
  align-items: center;    /* 文字居中 */
  background: #fdedec;
}
</style>

关键点：

border-radius: 50% 将矩形变为正圆
必须设置相等的 width 和 height

自定义各角弧度（不对称圆框）

<div class="custom-box">自定义各角</div>
<style>
.custom-box {
  width: 180px;
  height: 120px;
  border: 2px dashed #2ecc71;
  border-radius: 10px 30px 50px 5px; /* 顺序：左上 右上 右下 左下 */
  padding: 15px;
}
</style>

参数解析：
border-radius: 10px 30px 50px 5px; 对应四个角的独立半径（顺时针从左上开始）

响应式圆框（适配不同屏幕）

.responsive-circle {
  width: 80%;
  max-width: 300px;       /* 最大宽度限制 */
  aspect-ratio: 1/1;      /* 宽高比1:1 */
  border-radius: 50%;
  border: 2px solid #9b59b6;
}

创意效果：渐变边框圆框

<div class="gradient-circle"></div>
<style>
.gradient-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: white;
  border: 4px solid transparent;
  background-clip: padding-box; /* 背景不延伸至边框 */
  position: relative;
}
.gradient-circle::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px;  /* 覆盖边框位置 */
  right: -4px; bottom: -4px;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 渐变背景 */
}
</style>