检索或设置对象的可视区域。可视区域外的部分是透明的。

此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。

clip属性基础语法：

clip : auto 　 rect ( number number number number )

取值：

auto :　 默认值。对象无剪切

rect ( number number number number ) :　 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切

注意事项:

一、clip属性必须和定位属性postion一起使用才能生效。

二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。

兼容性:现代浏览器都支持

示例

html:

＜div id="imgClip">img src="1.jpg" width="159"height="99" /><br>＜/div>

css:

#imgClip {position:relativewidth:159pxheight:99pxbackground:#FFF985margin:0auto}

#imgClip img { position:absoluteclip:rect(21px 68px 51px 38px)}

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】

【八角形】

【菱形】

需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等

scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin

通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整

【裁切路径方案clip-path菱形】

【相关知识点】

clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）

生成器https://www.html.cn/tool/css-clip-path/

一、基本图形

inset()矩形（上右下左的边距round上右下左圆角）

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

circle圆形

circle()可以传人2个可选参数：

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比

2. 圆心位置，默认为元素中心点

半径公式

如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比

ellipse椭圆

ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

二、多边形polygon--正三角形

x: 0, y:100% 从元素的左上角开始，并从那里开始移动

x: 50%, y: 0

x: 100%, y: 100%  元素右边，元素底部

从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点

正方形

从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点

正五边形  59/（59+95）=38.31%，31/（81*2）=19.14%

162/2 = 81

59是上面三角形的高度

95是下面三角形的高度

31是下面四边形的高度

正六边形  50/（100+50 2）=25%，150/（100+50 2）=75%

50 是左边三角形的高度

100 是边长

正七边形 

22/（100+62 2）=10.09%

202/（100+62 2）=90.18%

43/（43+97+78）=19.72%

（43+97）/（43+97+78）=64.22%

62/（100+62 2）=27.68%

（100+62）/（100+62 2）=72.32%

正八边形

71/（100+71 2）=29.34%

（71+100）/（100+71 2）=70.66%

五角星

红叉叉

标签

也可用于动画中

如果觉得百分比不好计算，可以换算成px

下面就是第一个点的计算方法

35.00%*800=280px

29.75%*400=119px

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了

如果不同是没有效果的

小技巧，如果点不够，可以将两个坐标点进行重合即可

推荐网址：

http://species-in-pieces.com/

30个动物全部使用CSS3写的。超牛

在IE下的旋转滤镜有两种：

第一种：

CSS样式

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation:1)

其中rotation属性只有四个值：0,1,2,3 分别表示的旋转度数是：0度，90度，180度，270度。查看参考文档，请点击这里，但是想要旋转其他任意度数上面的方法就不适合了，这就需要下面的方法。

第二种

CSS样式

filter:progid:DXImageTransform.Microsoft.Matrix(enabled=bEnabled ,SizingMethod=sMethod ,FilterType=sType ,Dx=fDx ,Dy=fDy ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)

enabled:定义滤镜是否被禁止使用，取值范围为布尔值，当取值为true的时候滤镜可用；取值为false时，禁止使用滤镜。

SizingMethod:定义元素使用图片时是否改变属性。当取值为clip to original时，元素不改变尺寸；当取值为auto expand时，元素改变尺寸。

FilterType:定义元素旋转的方法。当取值为bilinear时，使用平滑、静态的显示效果；nearest neighhbor一般用于动态滤镜中。

Dx:定义水平方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。

Dy:定义垂直方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。

M11：定义元素右侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，右边线向右移动，同时拉伸元素的宽度；当取值小于1.0时，右边线向左移动，同时减小元素的宽度。

M12:定义元素底侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为0时。当取值大于0时，底部连线向右移动，同时拉伸元素的宽度；当取值小于0时，底部边线向左移动，同时拉伸元素的宽度。

M21：定义元素右侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为0。当取值大于0时，底部边线向下移动，同时拉伸元素的高度；当取值小于0时，底部边线向上移动，同时拉伸元素的高度。

M22：定义元素底侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，底部边线向下移，同时拉伸元素的高度；当取值小于1.0时，右边线向上移动，同时减小元素的高度。

以上是此滤镜全部的参数，但是平时用的最多的参数只有5个，所以可以简化为：

CSS样式

filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=sMethod ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)

SizingMethod一般选择“auto expand”，它和“clip to original”值的区别如下图（图中旋转角度都为45度）：

下面来说下如何计算旋转值，也就是如何计算M11,M12,M21,M22的值。

其实也很简单，用计算器算即可，如果你要做旋转动画，那么需要JS去计算，M11=cos(角度值),M12=-sin(角度

值),M21=sin(角度值),M22=cos(角度值)。例如：你想要旋转10度，那么sin(10)约=0.174,cos(10)

约=0.985,所以四个值相应为：M11=0.985,M12=-0.174,M21=0.174,M22=0.985

在这里也想提下，IE Matrix滤镜还可以实现放大和缩小的效果，类似于zoom样式，只要将M11,M12,M21,M22的值乘以相应的倍数即可。

Ps：在IE6和IE7中如果将滤镜写在<style>标签或者样式表中，会出现以下两个问题，

此滤镜之后的样式都会失效；

旋转滤镜一个页面中只允许有一个。

这两点的解决方案是：将滤镜样式直接内嵌在元素标签上。

如果有更好的解决方法可以留言。想了解更多Matrix滤镜，请猛戳这里和这里

这样配合CSS3样式transform即可兼容所有浏览器实现旋转效果。