今天小编跟大家讲解下有关CSS中的clip-path区域裁剪属性使用教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中的clip-path区域裁剪属性使用教程 的相关资料，希望小伙伴们看了有所帮助。
CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。
CSS Code复制内容到剪贴板 .clip-me{ position:absolute; clip:rect(110px,160px,170px,60px); clip-path:inset(10px20px30px40px); }在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=http://www.cnhhw.cn/skin/7ke/image/nopic.gif .clip-me{ clip-path:inset(10px20px30px40px); }在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。
clip-path的其他属性应用
CSS Code复制内容到剪贴板 .clip-me{ clip-path:url(#c1); 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); 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>来源：爱蒂网
