css clip属性剪裁元素

几乎忘了clip这个东西,很少用,但要用起来很好用^ ^。

解决溢出问题,习惯用标签把图片包起来,设定宽高,overflow hidden。

可是有一次,程序员同学完成开发后才知道需要图片剪裁,而那些图片外层木有加标签。要用overflow hidden的话,得要找忙碌的程序员同学修改html代码,还是不要了吧,不是有clip的吗?

<code>clip:rect(top,right,bottom,left)</code>

clip 的唯一合法形状值rect(left,right,bottom,left),元素必须为绝对定位(position:absolute)方能有效。

剪裁一张图片:

<code>img
{
position:absolute;
clip:rect(35px,260px,255px,95px);
}</code>

top, right, bottom, left 值参照下图,对号入座:

clip

浏览器支持情况:http://caniuse.com/#search=clip

去w3school试验一下:http://www.w3school.com.cn/tiy/t.asp?f=csse_clip



Leave a Reply

Your email address will not be published. Required fields are marked *

*