1.clip:默认值是auto,为不裁剪
<img border="0" src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" width="200" height="100">
当给img设置clip设置时,必须为img设置定位为绝对定位,为postion:absolute;
写样式时,
{
position:absolute;
clip:rect(0px 200px 100px 0px)
}
rect(top,right,bottom,left)
是裁剪图片的顶部,当是正值时,从图片的顶部开始裁剪。默认值是0
right:
是裁剪图片的右侧,默认值为图片的宽,当值开始逐渐减少时,图片从右侧开始一点一点的裁剪图片。
bottom:
是裁剪图片的底部,默认值为图片的高,当值逐渐减少时,图片从底部一点一点的裁剪图片。
left:
默认值是0,当值一点一点的增加时,开始从图片的左侧开始慢慢的裁剪图片。
当前的话,clip的形状函数只有rect()。clip属性只能在元素设置了‘position:absolute’或者'position:fixed'属性起作用。clip无法在设置'position:relative'和‘position:static’工作。
![](https://i-blog.csdnimg.cn/blog_migrate/beaf79e8e779b3b10a2f7c9bf484ebde.png)
浏览器兼容性
你可能会很关注,这个属性的兼容性不知道如何?请放心,clip属性得到较好的支持,在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法,但在ie4.0至ie7.0我们还是需要做一定的处理,需要把每个属性值之间的逗号去掉。
.my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */ }
需要特别的注意,ie4-ie7的要写在标准语句的前面,不然其他浏览器下将会无任何效果。
2.clip:rect(top,right,botttom,left)
在css2.1中,rect()中的<top>和<bottom>指定偏移量是从元素盒子顶部边缘算起;<left>和<right>指定的偏移量是从元素盒子的左边缘算起。<top>,<right>,<bottom>,<left>可以将值设置成为'auto'或者长度值<length>。而且还可以允许负的长度值。其中当<top>和<left>取值为‘auto’时,则默认为0,剪切区域的边缘和元素盒子边缘相同。当<right>和<bottom>设置为auto时,他们就相当于元素的宽度(这个宽度包括元素的border,padding和width),或者简单的理解为100%。
针对上面所言:
1.不显示剪切区域:当rect()中的bottom值小于top值,或者right值小于left值时,整个剪切区域不会显示。
二:clip-path
它是一个通过屏蔽和裁剪来隐藏元素的一部分的工具。尽管clip-path没有被主流的浏览器支持(包括IE和Firefox),但是webkit(chrome, safri)浏览器中,它仍然是一个实现时尚效果的小工具。
注意,在现代浏览器中需要添加使用-webkit-前缀。
clip-path简单的工作原理是提供一系列的x和y值来创建路径。当使用这些值创建一条完整路径时,就会把图像按照路径内部的尺寸进行裁剪。
利用clip-path,我们可以创建圆形,椭圆和多边形等不同的形状,创造力是唯一的限制。
例如:
一个简单的三角形裁剪:
![](https://i-blog.csdnimg.cn/blog_migrate/8dad682405ac1c6f0e4039d6902a986e.png)
.clipClass {
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
分析:
x:0 和y:0表示从元素的左上角开始,并从左上角开始移动。x: 100%;表示元素右边,y:100%;表示的是元素底部。
这个简单路径开始与左下角,水平移动50%,并到达顶部位置,然后又水平移动到100%的位置,垂直向下回到底部,到达第三个坐标点,三角形就出来了。
形状:
在上面的实例中,我们使用polygon来创建一个图形,并通过多对用逗号(,)分开的x值和y值定义了一个路径。然后,我们可以通过取不同的值来创建不同的图形。
圆:
![](https://i-blog.csdnimg.cn/blog_migrate/99544c80404ef58bbc19a4cda1c45979.png)
为了创建圆形,需要给circle传入三个值:圆心的坐标(X值和Y值)以及半径。当定义圆的半径时,我们可以用at关键字来定义圆心坐标:
.clipClass {
-webkit-clip-path: circle(50% at 50% 50%);
}
椭圆:
![](https://i-blog.csdnimg.cn/blog_migrate/fd5f9d5a01d247216935d0e67fa98c88.png)
为了实现椭圆,需要给ellipse提供4个值:椭圆的x轴半径,y轴半径,定位椭圆位置的x坐标和y坐标,后面两个值用at关键字和前面的两个值分开。
.clipClass {
-webkit-clip-path:ellipse(30% 20% at 50% 50%);
}
插图:(在老版本的chrome中有错误)
![](https://i-blog.csdnimg.cn/blog_migrate/5394410655a1f4b7360335d1c4ab5f4c.png)
因为多边形边缘锐利,所以他可能不是你想要的东西,你想创建的圆角矩形,所以我们来看看Inset的值。Insert使用四个值(对应“上 右 下 左”的顺序)来设置圆角半径。
.clipClass {
-webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
}
上面的各个值分别对应为:
1. inset(<top><right><bottom><left>round<top-radius><right-radius><bottom-radius><left-radius>)
其简写形式:
.clipClass {
-webkit-clip-path: inset(25% 0 round 0 25%);
}
注:其中的round前的参数是图形距离边框的距离,而round后的参数是图形的四个角的radius。使用border-radius实现上图的方法命令是:border-radius: 0 25%;
快速参考
- Circle: circle(radius at x-axis y-axis)
- Ellipse: ellipse(x-rad y-rad at x-axis y-axis)
- Polygon: polygon(x-axis y-axis, x-axis y-axis, … )
- Inset: inset(top right bottom left round top-radius right-radius bottom-radius left-radius)
创建图形:
正如你看到的,原型和圆角图形被少数几个值限制了,因而Polygons是创建复杂图形的最好选择,Polygons能定义多组点,运行我们用各种方式去裁图形。
Comic Textbox
![](https://i-blog.csdnimg.cn/blog_migrate/0089dc692465de46cb7d4dd6279328ec.png)
.clipClass {
-webkit-clip- path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%,50% 75%, 0% 75%);
}
Star:
![](https://i-blog.csdnimg.cn/blog_migrate/f3a72e446f48efdc522f979083667abc.png)
.clipClass {
-webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
}
注意:
/* 引用一个内联的 SVG <clipPath> 路径*/ clip-path: url(#c1); /* 引用一个外部的 SVG 路径*/ clip-path: url(path.svg#c1);
动画:
给形状应用一个hover,并用过渡属性来创建平滑的效果,但是需要记住,我们创建的初始默认状态,必须同所有的hover状态都使用相同的坐标系。
.animateClass {
-webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50%100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
}
.animateClass:hover {
-webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50%70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}