CSS中的clip-path区域裁剪属性使用教程

时间：2021-05-08

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>

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章