在css3中，使用绝对定位和clip属性实现环形进度条遮罩的核心做法是：利用两个半圆形的伪元素（或子元素）分别代表背景轨道和前景进度，通过绝对定位将它们重叠，并配合`transform: rotate()`控制旋转角度来显示不同的进度百分比。具体而言，通常将容器设为相对定位，内部包含一个表示100%进度的完整圆环和一个表示当前进度的圆环（或通过裁剪区域实现），通过计算旋转角度或调整`clip-path`/`clip`属性的矩形区域来动态展示进度。这种方法避免了svg或canvas，纯css实现，性能较好。
如何构建基础环形结构
基础环形结构由两个同心圆组成：一个是灰色的背景轨道，另一个是彩色的进度条。两者都通过`border-radius: 50%`实现圆形，并通过`border`属性绘制圆环。关键技巧是使用透明边框让圆环中间镂空，只保留边框部分可见。例如，设置`border: 10px solid #eee`作为背景，`border: 10px solid blue`作为进度条，并确保两者尺寸一致且居中。
<div class="progress-ring">
<div class="ring-bg"></div>
<div class="ring-progress"></div>
</div>
<style>
.progress-ring {
position: relative;
width: 100px;
height: 100px;
}
.ring-bg,
.ring-progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 10px solid;
box-sizing: border-box;
}
.ring-bg {
border-color: #eee;
}
.ring-progress {
border-color: blue;
/* 初始状态：隐藏进度 */
clip: rect(0, 50px, 100px, 0);
transform: rotate(-90deg);
}
</style>
上述代码中，`.ring-progress`默认被`clip: rect(0, 50px, 100px, 0)`裁剪为左半圆，并通过`rotate(-90deg)`使其从顶部开始。实际进度可通过JavaScript动态修改`clip`参数或`transform`角度来实现。
如何用clip属性动态控制进度
`clip`属性通过定义一个矩形区域来裁剪元素可见部分。对于环形进度条，可将圆环分为左右两半，分别控制其显示。例如，当进度为50%时，显示左半圆；75%时，显示左半圆加右半圆的一部分。具体实现需结合`transform`旋转和`clip`裁剪的组合。注意：`clip`属性在现代浏览器中已被`clip-path`取代，但兼容性要求高时仍可使用。
<script>
function setProgress(percent) {
const ring = document.querySelector('.ring-progress');
if (percent <= 50) {
// 左半圆显示，右半圆隐藏
ring.style.clip = `rect(0, ${50 + percent}px, 100px, 0)`;
ring.style.transform = 'rotate(-90deg)';
} else {
// 左半圆全显，右半圆部分显示
ring.style.clip = 'rect(0, 100px, 100px, 50px)';
ring.style.transform = `rotate(${(percent - 50) * 3.6 - 90}deg)`;
}
}
// 示例：设置进度为75%
setProgress(75);
</script>
该脚本根据进度值动态调整`clip`和`transform`。当进度≤50%时，仅裁剪右半部分；超过50%时，先显示完整左半圆，再通过旋转显示右半圆的剩余部分。此方法确保进度条平滑过渡，且无需额外DOM元素。
为什么clip属性在某些浏览器中失效
`clip`属性仅在元素具有非静态定位（如`position: absolute`或`relative`）且溢出隐藏（`overflow: hidden`）时生效。若未设置这些条件，裁剪可能无效。此外，现代浏览器更推荐使用`clip-path`，因其支持更复杂的形状且性能更优。例如，将`clip: rect(...)`替换为`clip-path: inset(...)`可获得相同效果且兼容性更好。在实际项目中，建议优先使用`clip-path`，除非需要支持极旧版浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
