【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"
);