在网页开发过程中，圆形元素是非常常见的设计元素，无论是用户头像、操作按钮还是页面装饰组件，都经常会用到圆形的样式。通过css的相关属性，我们可以快速实现不同场景下的圆形效果，下面介绍几种常用的实现方式。
一、使用border-radius实现基础圆形
最常用也最简单的制作圆形的方式是使用border-radius属性，这个属性用来设置元素的外边框圆角。当元素的宽度和高度相等，且border-radius的值设置为宽度或高度的一半，或者设置为50%时，元素就会变成圆形。
实现的基础条件有两个：一是元素必须是正方形，也就是宽度width和高度height的数值相等；二是border-radius的值要设置为边长的50%。
下面是一个基础的实现示例：
/* 基础圆形样式 */
.circle-basic {
width: 100px;
height: 100px;
background-color: #409eff;
border-radius: 50%;
}
对应的html结构如下：
<div class="circle-basic"></div>
这里border-radius: 50%表示圆角的半径是元素边长的一半，因为宽高都是100px，所以半径就是50px，刚好让四个角都变成圆弧，最终形成正圆形。如果宽高不相等，设置50%的话会得到椭圆形，比如宽200px高100px的元素设置border-radius: 50%就会得到横向的椭圆。
二、结合伪元素实现特殊圆形效果
有时候我们不需要直接修改元素本身的样式，而是需要在元素周围添加圆形装饰，这时候可以使用伪元素::before或者::after来实现，这样不会额外增加html标签，保持结构简洁。
比如我们要给一个按钮添加一个圆形的角标，就可以用伪元素实现：
/* 按钮基础样式 */
.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%;
}
对应的html结构：
<button class="btn-with-badge">消息</button>
这里伪元素默认是行内元素，所以需要设置宽高之前要确认它的定位或者显示类型，这里用了绝对定位，所以可以直接设置宽高，最终形成一个红色的圆形角标。
三、使用transform调整圆形状态
有时候我们需要圆形的旋转、缩放等动态效果，这时候可以结合transform属性来实现，比如制作一个旋转的圆形加载动画。
示例代码如下：
/* 旋转圆形加载样式 */
.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);
}
}
对应的html结构：
<div class="circle-loading"></div>
这里首先用border-radius: 50%做出圆形的边框，然后只给顶部边框设置不同的颜色，再结合transform的rotate旋转动画，就形成了一个加载中的圆形旋转效果。
四、注意事项
- 制作正圆形必须保证元素的宽高数值一致，否则会得到椭圆形。
- 如果元素有边框或者内边距，计算宽高的时候要把这些数值算进去，避免出现圆形变形。比如元素设置了
padding: 10px，那么内容区域的宽高需要减少20px才能保证整体是正方形。 - 使用
border-radius的时候，如果数值超过边长的一半，也不会出现错误，效果和设置50%是一样的。 - 如果圆形元素内部有文字内容，需要注意文字的对齐方式，可以通过
text-align: center和line-height等于高度的方式让文字在圆形中居中。
下面是一个文字居中的圆形示例：
.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>
css圆形border-radius伪元素transform修改时间：2026-07-04 17:18:28