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

麻凯倩

微信:makaiqian