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

1. .clip-me {           
2.   /* 已被标志为不推荐使用的写法 */     position: absolute; /* 需要 absolute 和 fixed 定位 */  
3.   clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */     /* 值描述的是一个 top/left 点和一个 bottom/right 点 */  
4.      /* 最新规范写法 (没有定位要求)， */  
5.   clip-path: inset(10px 20px 30px 40px); /* or "none" */     /* 值指的是 top, right, bottom, left 四个点 */  
6.      
7. }  

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

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

例子：

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

代码如下：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表