【CSS】clip-path 属性（剪裁显示区域）
文章目录
- 属性用法：
使用背景：遇到这样一个需求，嵌入一个网页到系统，但是不需要他顶部的导航栏，这时候就可以使用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"
);