css3中使用clip-path将图片裁剪成不规则图形添加边框

html-css036

css3中使用clip-path将图片裁剪成不规则图形添加边框,第1张

img{

-webkit-clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

clip-path: polygon(0 0,100% 0,100% 40px,145px 40px,130px 60px,115px 40px,0 40px,0 0)

}

clip属性说明:

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

此属性定义了绝对(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)}