nodejs29 (UI相关) : CSS 剪辑路径clip-path 绘制多边形+不规则形状+交互式开发人员工具

clip-path语法

• clip-path语法 : https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

使用基本几何形状来定义剪裁路径

/* === <basic-shape> 值 === */
/*在进行剪裁时需要注意，原始的高宽要大于剪裁的值，否则就显示为空了*/
/* 使用一个内嵌矩形进行剪裁，定义上、右、下、左的偏移量。如clip-path: inset(100px 50px 20px 30px);，下边的示例是简写方法 */
clip-path: inset(100px 50px); /* 等于 inset(100px 50px 100px 50px) */
clip-path: inset(0 round 20px); /* 设置圆角矩形 */

/* 使用一个圆形进行剪裁，定义半径和位置。 */
clip-path: circle(50px at 0 100px);

/* 使用一个椭圆进行剪裁，定义横轴和纵轴半径及位置。 */
clip-path: ellipse(50px 60px at 10% 20%);

/* 使用多边形进行剪裁，通过一系列 (x, y) 坐标点定义路径。比如50% 0%就是在顶部中心 */
clip-path: polygon(50% 0