clip是什么意思?clip rect剪裁样式介绍
2017-01-10 22:20

   clip定义

 clip是一个css属性,用来定义元素的那一部分用来显示。css clip属性必须应用在绝对定位的元素上,可以是position:absolute,也可以是position:fixed;


clip语法

clip:rect(top,right,bottom,left);
clip:rect(top right bottom left);

clip rect的语法上面两种写法都可以,一般倾向于第二种,毕竟少写4个逗号呢。

其中的top,right,bottom,left都是相对于元素的左上角开始计算数值的。

clip: auto;
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

clip:auto是不剪裁的意思。

clip rect可以使用web中的所有数值单位。

对一个元素的clip剪裁效果如下:

rectclip.png

点击这里查看clip效果示意demo

clip rect 裁剪的一些用处

clip裁剪我们可以用来隐藏web控件,通过label的for指向web控件实现自定义样式。

clip裁剪可以用来裁剪图片。

clip裁剪可以用来一些动画。

样式是死的,思维是活的。思想有多大,用途就有多大。


clip rect 兼容性

clipcompat.png

clip 剪裁注意点

clip rect剪裁,会导致元素看不见的几种情况:

clip:rect(0,0,0,0);

clip:rect(10,20,0,0);bottom<top;

clip:rect(0,20,20,30);left>right;

clip结语

clip能够很好的实现元素的剪裁或者元素的隐藏,兼容性良好。不过w3c说clip已经过时了,要用clip-path来替代clip,但目前clip-path的兼容性尚不如意,我们只能先用着clip,等待着clip-path,因为clip-path功能更强大,可以按照任意路径剪裁元素,期待将来可以使用。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3619)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1