搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS中的clip-path区域裁剪属性如何使用好代码教程

发布时间：2023-01-03 04:33:17 来源：网络
.
又是一场大雪过后，天空像海一样蔚蓝，甚至比海更加晶莹剔透。千峰万岭，极目望去，尽是白色，闪耀着一片连接不断的银光。山顶积雪未融，如白银宫网。

CSS中的clip-path能够让你指定一个网页元素的显示区域，而不是缺省的显示全部。

CSS Code复制内容到剪贴板
  1. .clip-me{
  3. /*已被标志为不推荐使用的写法*/
  4. position:absolute;/*需要absolute和fixed定位*/
  5. clip:rect(110px,160px,170px,60px);/*或"auto"*/
  6. /*值描述的是一个top/left点和一个bottom/right点*/
  8. /*最新规范写法(没有定位要求)，*/
  9. clip-path:inset(10px20px30px40px);/*or"none"*/
  10. /*值指的是top,right,bottom,left四个点*/
  13. }

在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。

需要注意的是，数值中间是用空格分割的，而老式的是用逗号。

例子：

看这个效果，对这个DIV进行了裁剪。

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="haorooms-small"style="background-image:url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');">
  2. </div>
CSS Code复制内容到剪贴板
  1. .haorooms-small{
  2. background-size:cover;
  3. width:300px;
  4. height:300px;
  5. -webkit-clip-path:polygon(0%50%,25%0%,75%0%,100%50%,75%100%,25%100%);
  6. clip-path:polygon(0%50%,25%0%,75%0%,100%50%,75%100%,25%100%);
  7. }

clip-path的inset属性应用

CSS Code复制内容到剪贴板
  1. <imgclass="clip-me"src="thing-to-be-clipped.png">
  2. .clip-me{
  3. /*最新规范写法(没有定位要求)，*/
  4. clip-path:inset(10px20px30px40px);/*or"none"*/
  5. /*值指的是top,right,bottom,left四个点*/
  6. }

在clip-path的属性值中的inset()函数中有四个值，分别表达着top/left和bottom/right四个点，圈出一个矩形面积。这个矩形面积外的部分都将被裁剪隐藏掉。

clip-path的其他属性应用

CSS Code复制内容到剪贴板
  1. .clip-me{
  3. /*引用一个内联的SVG<clipPath>路径*/
  4. clip-path:url(#c1);
  6. /*引用一个外部的SVG路径*/
  7. clip-path:url(path.svg#c1);
  9. /*多边形*/
  10. clip-path:polygon(5%5%,100%0%,100%75%,75%75%,75%100%,50%75%,0%75%);
  12. /*圆形*/
  13. clip-path:circle(30pxat35px35px);
  15. /*椭圆*/
  16. clip-path:ellipse(65px30pxat125px40px);
  18. /*inset-rectangle()将会替代inset()?*/
  19. /*rectangle()有可能出现于SVG2*/
  21. /*圆角*/
  22. clip-path:inset(10%10%10%10%round20%,20%);
  24. }

SVG 裁剪路径样例：

CSS Code复制内容到剪贴板
  1. <clipPathid="clipping">
  2. <circlecx="150"cy="150"r="50"/>
  3. <rectx="150"y="150"width="100"height="100"/>
  4. </clipPath>

到此这篇关于CSS中的clip-path区域裁剪属性如何使用好代码教程就介绍到这了。不因为好天气而用光自己所有的力气，不因为坏天气而怨天尤人。把一切的不如意归于外界，或是自己，都是这世上最最最傻的行为。更多相关CSS中的clip-path区域裁剪属性如何使用好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： CSS
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图