本章给大家带来css中clip属性是什么？clip:rect（）制作圆形进度条动画（代码实例），给大家介绍了什么是clip属性，clip:rec(）的用法，最后通过一个实例让大家更直观的了解clip:rect()。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、css什么是clip属性？
clip 属性剪裁绝对定位元素。clip 属性允许定义一个元素的可见尺寸，当一幅图像的尺寸大于包含此元素时，此图像就会被修剪并显示为这个元素定义的形状。
1.语法
img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}代码示例：
立即学习“前端免费学习笔记（深入）”；
原图：
@@##@@裁剪后
@@##@@
效果图：
clip:rect(0px,165px,200px,34px)中的0px,165px,200px,34px分别对应图片的上，右，下，左四个方位 ；clip:rect()需要配合position属性使用，才能对图像进行裁剪。
注意：
如果先有"overflow：visible"定义了元素，clip属性就不起作用。
css中的clip:rect()只能在绝对定位的元素上使用，包括fixed属性的元素，因为fixed也算绝对定位
2.可用性隐藏
根据上面对top right bottom left的释义，如果left >= right或者bottom
二、css3制作圆形进度条动画（css3 动画与clip:rect()结合使用）
先看看加载效果图：
代码实例：
css3制作圆形进度条动画
思路：
1.先画一个正方形边框
2. 通过border-radius属性使他变成一个圆 （考虑兼容性）
-moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em;
3. 设置动画效果，通过改变clip的裁剪位置（与定位结合）使这个圆慢慢显现
@-webkit-keyframes craw {
0% {
clip: rect(0em, 1em, 0em, 0.5em);
}
50% {
clip: rect(0em, 1em, 1em, 0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
clip: rect(0em, 1em, 1em, 0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
