在网页界面中，圆形元素经常出现在头像、按钮、提示角标、加载指示器等位置。相比矩形，圆形视觉更柔和，也更容易形成视觉焦点。使用 CSS 制作圆形并不复杂，关键在于理解盒子的宽高、圆角半径以及定位之间的关系。只要掌握 border-radius 的基本用法，再配合伪元素和 transform，就可以覆盖大多数常见需求。
一、使用 border-radius 构建正圆形的核心条件
在 CSS 中，border-radius 是制作圆形最直接的属性。它的作用是给元素的边框添加圆角，当圆角半径足够大时，原本的直角会逐渐变成弧线。如果元素本身是正方形，并且圆角半径正好等于边长的一半，四条弧线就会首尾相接，最终形成一个标准的正圆形。
实现正圆形有两个基础条件。第一，元素的宽度和高度必须相等，也就是形成一个正方形盒子。第二，border-radius 的值需要设置为边长的一半。实际书写时，可以使用固定像素，也可以直接使用 50%。使用百分比的好处是，只要盒子保持正方形，无论尺寸如何变化，圆形都可以自动适配。
如果宽度和高度不一致，即使设置了 border-radius: 50%，得到的也不是正圆，而是椭圆。例如一个宽度大于高度的元素，会呈现横向拉伸的椭圆效果。因此，在制作圆形之前，首先要确认元素的盒模型尺寸是否满足正方形这一前提。
下面是一个最基础的圆形样式示例。这里通过固定宽高创建正方形，再使用 border-radius: 50% 得到圆形。
/* 基础圆形样式 */
.circle-basic {
width: 100px;
height: 100px;
background-color: #409eff;
border-radius: 50%;
}
对应的结构非常简单，只需要一个带有类名的 <div> 元素即可。
<div class="circle-basic"></div>
在这个示例中，宽度和高度都是 100px，因此边长的一半是 50px。设置 border-radius: 50% 后，四个角的圆角半径都相当于 50px，所以元素会呈现正圆。即使后续把宽高改成其他相等的数值，只要保持 border-radius: 50%，仍然可以得到圆形。
二、利用伪元素为现有元素附加圆形装饰
并不是所有圆形都需要直接作用在主体元素上。在一些界面中，圆形只是附属装饰，例如按钮右上角的小圆点、列表项前的圆形标记，或者头像旁边的状态指示点。这类场景下，可以使用伪元素来生成圆形，避免为了一个小圆点额外增加标签。
CSS 提供了 ::before 和 ::after 伪元素，它们可以在元素内部插入由样式生成的内容。只要为伪元素设置 content 属性，再配合宽度、高度和 border-radius，就可以生成圆形。若需要把圆形放置在父元素的特定位置，通常会给父元素设置 position: relative，再给伪元素设置 position: absolute。
下面的示例展示了一个带有圆形角标的按钮。按钮本身仍然是普通矩形，右上角的红色圆形由伪元素生成。
/* 按钮基础样式 */
.btn-with-badge {
position: relative;
width: 120px;
height: 40px;
background-color: #67c23a;
border: none;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
/* 圆形角标样式 */
.btn-with-badge::after {
content: "";
position: absolute;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
background-color: #f56c6c;
border-radius: 50%;
}
页面中只需要一个普通的按钮元素。
<button class="btn-with-badge">消息</button>
在这段样式中，::after 伪元素被设置为绝对定位，并通过负值偏移移动到按钮右上角外侧。由于它的宽度和高度相等，再加上 border-radius: 50%，最终会形成一个红色小圆点。这种方式不会改变原有按钮的结构，也便于后续统一维护。
需要注意的是，伪元素生成的内容默认并不具备完整的盒模型表现，但在设置绝对定位之后，可以直接使用宽度和高度。如果圆形装饰不需要脱离文档流，也可以结合 display: inline-block 等方式处理。不过在这类角标场景中，绝对定位通常更加灵活。
三、结合 transform 与动画制作动态圆形
圆形不仅可以是静态图形，也经常用于动态反馈，例如加载中的旋转圆环。制作这类效果时，通常先用 border 和 border-radius 画出圆环，再通过 transform 控制旋转。这样可以在不改变元素实际占位的情况下，实现平滑的动画效果。
常见的加载圆环会把边框分成两种颜色：大部分边框使用较浅的颜色，只让其中一边使用醒目的颜色。由于元素已经是圆形，旋转时醒目边框会沿着圆周移动，从视觉上形成加载进度不断转动的感觉。
下面的示例使用顶部边框作为高亮部分，并配合 @keyframes 定义旋转动画。
/* 旋转圆形加载样式 */
.circle-loading {
width: 40px;
height: 40px;
border: 4px solid #e4e7ed;
border-top-color: #409eff;
border-radius: 50%;
animation: rotate 1s linear infinite;
}
/* 旋转动画定义 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
结构中只需要一个用于承载动画的 <div> 元素。
<div class="circle-loading"></div>
这段代码首先通过 border-radius: 50% 让带边框的盒子变成圆环，然后单独修改顶部边框颜色，使圆环出现明显的视觉焦点。随后，animation 调用名为 rotate 的关键帧动画，让元素从 0deg 旋转到 360deg。由于动画设置为线性且无限循环，所以会持续旋转。
在实际使用时，可以根据界面需要调整圆环大小、边框粗细、旋转速度和颜色。如果希望动画更平缓，可以修改 animation-timing-function；如果只需要旋转一次，也可以去掉无限循环设置。无论怎样调整，圆形本身仍然依赖宽高相等和 border-radius: 50% 这两个基础条件。
四、制作圆形时的细节处理与文字居中
虽然圆形实现起来不复杂，但细节处理不当很容易导致效果偏离预期。最常见的问题是元素并非严格正方形。除了直接设置 width 和 height，还要考虑边框和内边距对整体尺寸的影响。如果元素有边框或者内边距，计算宽高时需要把这些数值算进去，否则视觉上的盒子可能会变成长方形，圆形也会随之变成椭圆。
例如一个元素设置了 padding: 10px，那么左右两侧会增加二十像素，上下两侧也会增加二十像素。如果希望最终外观保持正方形，就需要在内容尺寸上做相应调整，或者重新核对整体宽高。只要最终参与圆角计算的盒子保持宽高一致，圆形就不会变形。
另一个常见需求是在圆形内部放置文字。对于单行文字，可以让文字水平居中，并让行高等于圆形高度，这样文字就会在垂直方向上处于中间位置。下面的示例展示了如何在圆形中显示两个字。
/* 带文字的圆形样式 */
.circle-text {
width: 80px;
height: 80px;
background-color: #e6a23c;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 80px;
font-size: 14px;
}
<div class="circle-text">圆形</div>
在这个示例中，text-align: center 负责水平居中，line-height: 80px 与高度保持一致，使文字在圆形内部垂直居中。若字号较大或文字较长，需要适当调整圆形尺寸，避免文字溢出或换行。
- 制作正圆形时，必须保证元素宽度和高度一致，否则
border-radius: 50%只能得到椭圆。 - 如果元素包含边框或内边距，需要把它们纳入整体尺寸计算，确保最终盒子仍然是正方形。
border-radius的数值即使超过边长的一半，也不会产生错误，效果通常与设置一半相同。- 圆形内部如果有单行文字，可以结合
text-align和line-height实现居中。
综合来看，CSS 制作圆形的核心并不在于某个复杂技巧，而在于对基础盒模型的理解。border-radius 负责把方形盒子变成圆形，伪元素负责在不增加结构的情况下扩展圆形装饰，transform 则让圆形具备旋转和动态表现。只要围绕这几个属性组合使用，就可以在网页中稳定地实现各种圆形效果。
css圆形border-radius伪元素transform修改时间：2026-07-04 17:18:28