效果如下： 先来讲一下原理吧，说先画一个圆环，圆环的画法有很多，就不说了。然后用clip切掉一半的圆环。clip怎么用？一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏
效果如下：
先来讲一下原理吧，说先画一个圆环，圆环的画法有很多，就不说了。然后用clip切掉一半的圆环。clip怎么用？一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切 。
切了一半然后怎么办？怎么让它显示少于50%的情况？
在切掉的那一边放一个矩形的遮罩层，然后用rotate把半圆环进行旋转，即能得到小于50%的了。
半个是很简单，那整个的呢？这个就需要比较扎实的css3功底了。我也是在看了大神的代码后才豁然开朗。
先贴代码：
<!--
Author: Meta Luo
Date: 2015/10/15
-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrapper {
width: 100px; /* Set the size of the progress bar */
height: 100px;
position: absolute; /* Enable clipping */
最低0.47元/天 解锁文章
1606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
