CSS3的clip

一句话介绍

裁剪图像。

基本语法

.mkq {
    clip: <shape>|auto|inherit;
}

：函数功能，目前只有rect()可用

auto：和没剪裁过一样

inherit：继承父元素

举例：

.mkq{
    clip: rect(0,0,20px,0);
}

使用注意

1. 只能在设置了position: absolute;\float: left;的属性上起作用

2. 如果使用了auto，就包含border和padding

兼容性

还不错，但是在IE4-IE7需要把rect()里面的逗号去掉

Demo

链接：http://codepen.io/makaiqian/pen/ydzjm

中途出现了一点问题，已经解决。注意clip(,,,);这几个值是坐标值，而不是相对于上下左右的距离。

SVG

CSS与SVG有很多共同之处。

扩展链接：http://www.w3cplus.com/css3/css-svg-clipping.html