css3百分比圆环画 |css如何判断ie

<div class="progress-bar"><div class="progress"><p>70%</p></div><p>Progress</p></div>

其中，进度条的容器使用了一个名为.progress-bar的DIV，进度条DIV的类名为progress，里面放置了一个P标签，用于展示进度的文字。为了实现圆环的形状，大家需要使用CSS3的border-radius属性。同时，大家使用了CSS3中的过渡效果，使进度动态展示：

.progress-bar {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 50px, 100px, 0);
background-color: #e6e6e6;
transition: clip 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.progress p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bold;
color: #333;
}
.progress-bar:hover .progress {
clip: rect(0, 100px, 100px, 50px);
}

通过以上CSS代码，大家定义了进度条的样式，包括其尺寸、位置和形状等等。大家使用了CSS3的clip属性，来剪裁进度条。当鼠标滑过进度条时，大家设置过渡效果，让进度条动态展示。

这是一个简单的基于CSS3的百分比圆环画，完全不需要用到任何Javascript代码。它可以轻松地添加到任何网页中，让网页更具有动感和互动性。