当需要改变元素的可视区域，通常会直接设置元素的width和height，但这样会使其内部元素重新布局。在需求中，我需要更改一个元素的可视区域，但这个元素的背景颜色是一个渐变色，如果直接修改元素的宽高会使渐变色被伸缩，为了保持渐变色不被伸缩，我找到了clip-path属性。
clip-path的作用可以看作一个剪切蒙版，它可以yongurl直接引用一个SVG 的 <clipPath>。
创建方形蒙版
- 创建一个
30px大小的矩形，居于元素中间。
clip-path: inset(30px);
- 按照上右下左的顺序定义一个矩形，行为类似于
padding
clip-path: inset(1rem 2rem 3rem 4rem);
- 创建一个带圆角的矩形。
round后紧跟圆角尺寸，该属性类似border-radius，按照左上、右上，右下、左下的顺序定义圆角。
clip-path: inset(1rem round 10px);
创建圆形蒙版
- 创建一个
30px大小的圆形，居于元素中间。
clip-path: circle(50px);
- 定义圆心的位置。
at后紧跟圆心的位置，按照左边距、上边距的顺序定义。可以使用top、left、center等值。
clip-path: circle(50px at 2em center);
创建椭圆形蒙版
- 语法与圆形类似，只是可以分别定义圆的横向宽度和纵向宽度。
clip-path: ellipse(4rem 50% at right center);
创建多边形蒙版
- 以空格分隔x轴坐标和y轴坐标，以逗号分隔每个点。
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
创建任意形状蒙版
- 类似SVG
<path>元素，一般在AI里面画好copy过来就行了
clip-path: path( 'M 20 240 \ C 20 0 300 0 300 240 Z');
