又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。
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中的clip-path区域裁剪属性如何使用好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
