文章目录
- 属性用法:
使用背景:遇到这样一个需求,嵌入一个网页到系统,但是不需要他顶部的导航栏,这时候就可以使用clip-path 属性剪裁掉顶部导航栏,把网页相当于照片,把不想要的部分剪掉就好了
- 使用案例:
clip-path: inset(70px 0px 0px); /* 剪掉顶部70px高度的部分 */
margin-top: -70px; /* 再将整体部分线上移动70px,避免顶部出现被裁剪的那部分空白 */
属性用法:
clip-path
:CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
属性值 | 描述 |
---|---|
inset() | 定义一个 inset 矩形。 |
circle() | 定义一个圆形(使用一个半径和一个圆心位置)。 |
ellipse() | 定义一个椭圆(使用两个半径和一个圆心位置)。 |
polygon() | 定义一个多边形(使用一个 SVG 填充规则和一组顶点)。 |
path() | 定义一个任意形状(使用一个可选的 SVG 填充规则和一个 SVG 路径定义)。 |
/* 上下裁剪100px,左右裁剪50px */
clip-path: inset(100px 50px);
/* 以x轴为0,y轴为100px的地方作为圆心,裁剪一个50px半径的圆 */
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);