CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。
CSS Code复制内容到剪贴板 .clip-me{ /*已被标志为不推荐使用的写法*/ position:absolute;/*需要absolute和fixed定位*/ clip:rect(110px,160px,170px,60px);/*或"auto"*/ /*值描述的是一个top/left点和一个bottom/right点*/ /*最新规范写法(没有定位要求)，*/ clip-path:inset(10px20px30px40px);/*or"none"*/ /*值指的是top,right,bottom,left四个点*/ }
在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。
需要注意的是，数值中间是用空格分割的，而老式的是用逗号。
例子：
看这个效果，对这个DIV进行了裁剪。
代码如下：
XML/HTML Code复制内容到剪贴板 <divclass="haorooms-small"style="background-image:url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');"> </div> CSS Code复制内容到剪贴板 .haorooms-small{ background-size:cover; width:300px; height:300px; -webkit-clip-path:polygon(0%50%,25%0%,75%0%,100%50%,75%100%,25%100%); clip-path:polygon(0%50%,25%0%,75%0%,100%50%,75%100%,25%100%); }
clip-path的inset属性应用
CSS Code复制内容到剪贴板 <imgclass="clip-me"src="thing-to-be-clipped.png"> .clip-me{ /*最新规范写法(没有定位要求)，*/ clip-path:inset(10px20px30px40px);/*or"none"*/ /*值指的是top,right,bottom,left四个点*/ }
在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。
clip-path的其他属性应用
CSS Code复制内容到剪贴板 .clip-me{ /*引用一个内联的SVG<clipPath>路径*/ clip-path:url(#c1); /*引用一个外部的SVG路径*/ clip-path:url(path.svg#c1); /*多边形*/ clip-path:polygon(5%5%,100%0%,100%75%,75%75%,75%100%,50%75%,0%75%); /*圆形*/ clip-path:circle(30pxat35px35px); /*椭圆*/ clip-path:ellipse(65px30pxat125px40px); /*inset-rectangle()将会替代inset()?*/ /*rectangle()有可能出现于SVG2*/ /*圆角*/ clip-path:inset(10%10%10%10%round20%,20%); }
SVG 裁剪路径样例：
CSS Code复制内容到剪贴板 <clipPathid="clipping"> <circlecx="150"cy="150"r="50"/> <rectx="150"y="150"width="100"height="100"/> </clipPath>
【CSS中的clip-path区域裁剪属性使用教程】相关文章：
★ CSS中display:inline-block属性妙用