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

如何用HTML画一个圆框？

admin
前端开发
2025-07-05
5

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

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

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

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

<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>

效果说明：

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>

关键点：

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

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; 对应四个角的独立半径（顺时针从左上开始）

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

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

.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>