1、clip-path
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none;
<clip-source>：可以是一个 URL，指向一个 SVG <clipPath> 元素。
<basic-shape>：基本形状函数，用于定义裁剪区域的形状，例如 circle()、ellipse()、polygon()、inset() 等。
<geometry-box>：指定基本形状的参考框，例如 border-box、padding-box、content-box 等。
none：表示不进行裁剪，元素将完整显示。
/* 圆形裁剪 */.circle {width: 200px;height: 200px;background-color: #f00;clip-path: circle(50% at 50% 50%); //半径，at 圆心}/* 椭圆形裁剪 */.ellipse {width: 300px;height: 200px;background-color: #0f0;clip-path: ellipse(50% 30% at 50% 50%);//水平半径和垂直半径，可以是长度值或百分比 at圆心}/* 多边形裁剪 */.polygon {width: 200px;height: 200px;background-color: #00f;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);//多边形的顶点 按照点的顺序连接四个点}/* 矩形裁剪 */.inset {width: 200px;height: 200px;background-color: #ff0;clip-path: inset(10% 20% 30% 40%); //上右下左裁剪距离}
2、shape-outside
它允许你定义一个浮动元素的形状，使得周围的内联内容（如文本）可以围绕该形状进行布局，而不是传统的矩形环绕
shape-outside: <shape-box> | <basic-shape> | <image> | none;
