视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详解CSS中的clip-path区域裁剪属性使用方法
2020-11-27 18:52:48 责编:小采
文档
clip-path能根据设定的大小将页面的元素划分出所要显示的区域,或者说相当于遮罩而不是真正地裁去某个部分,这里我们就来看一下CSS中的clip-path区域裁剪属性使用教程

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

.clip-me { 

 /* 已被标志为不推荐使用的写法 */
 position: absolute; /* 需要 absolute 和 fixed 定位 */
 clip: rect(110px, 160px, 170px, 60px); /* 或 "auto" */
 /* 值描述的是一个 top/left 点和一个 bottom/right 点 */

 /* 最新规范写法 (没有定位要求), */
 clip-path: inset(10px 20px 30px 40px); /* or "none" */
 /* 值指的是 top, right, bottom, left 四个点 */


}

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

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

例子:

看这个效果,对这个p进行了裁剪。

代码如下:

<p class="haorooms-small" style="background-image: url('http://sandbox.runjs.cn/uploads/rs/216/0ygzo2/idtga8h3.png');">
 </p>
.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属性应用

<img class="clip-me" src="thing-to-be-clipped.png"> 
.clip-me { 
 /* 最新规范写法 (没有定位要求), */
 clip-path: inset(10px 20px 30px 40px); /* or "none" */
 /* 值指的是 top, right, bottom, left 四个点 */
}

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

clip-path的其他属性应用

.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(30px at 35px 35px); 

 /* 椭圆 */
 clip-path: ellipse(65px 30px at 125px 40px); 

 /* inset-rectangle() 将会替代 inset() ? */
 /* rectangle() 有可能出现于 SVG 2 */

 /* 圆角 */
 clip-path: inset(10% 10% 10% 10% round 20%, 20%); 

}

SVG 裁剪路径样例:

<clipPath id="clipping"> 
 <circle cx="150" cy="150" r="50" /> 
 <rect x="150" y="150" width="100" height="100" /> 
</clipPath>

下载本文
显示全文
专题