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="thing-to-be-clipped.png">.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> 
最新文章
热门文章
猜你喜欢
