【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"
);
原文地址：https://blog.csdn.net/qq_45677671/article/details/144088500
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！