【CSS】clip-path裁剪路径这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战 clip-

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

clip-path

这次，我们一起来学习一下CSS中的clip-path属性：裁剪路径

clip-path可用于裁剪各种形状，并将裁剪出来的形状应用于元素的可视区域，这样元素将会呈现出clip-path裁剪后的形状
该属性使用的属性值主要包括三类
- clip-source：表示引用外部资源进行裁剪
- geometry-box：表示使用盒模型属性对元素进行裁剪
- basic-shape：表示使用自带的函数来绘制裁剪图形
本文主要介绍basic-shape属性值的使用方式，其它两种仅作简单介绍

（1）`clip-source`

作用：引入外部路径来绘制裁剪路径
语法：clip-path: url()
- 通过url()来进行引入SVG元素，并按照SVG的路径进行裁剪
使用：略

（2）`geometry-box`

作用：通过设置引用框来确定裁剪边缘
语法：clip-path: <geometry-box>
- margin-box、border-box、padding-box、content-box、fill-box、stroke-box、view-box、none
使用：略

（3）`basic-shape`

作用：使用形状函数来绘制裁剪路径
语法：clip-path: <basic-shape>
- circle：裁剪圆形
- ellipse：裁剪椭圆形
- inset：裁剪矩形
- polygno：裁剪多边形

使用：

裁剪圆形
- 语法：clip-path: circle(r at x y)
  - r表示圆的半径
    - 半径必传，也可以只传半径，圆心默认居中
  - at表示定义圆心的参数
  - x表示圆心的X坐标
  - y表示圆心的Y坐标
  - 属性值：
    - 初始坐标(0,0)从元素的左上角开始计算
    - 属性值可以是具体的数值，如px、%，百分比值以元素的宽高为基准
    - 也可以是方位名词，如top、left、center，缺省默认为center
- 使用：
```
.box {
    width: 100px;
    height: 100px;
    clip-path: circle(40% at center center);
    background-color: #000;
}
```
裁剪椭圆形
- 语法：clip-path: ellipse(rx ry at x y)
  - rx表示椭圆的X轴方向上的半径，ry表示椭圆的Y轴方向上的半径
    - 必须的，可以相同，相同则为圆形
  - 其它参数同circle的参数
- 使用：
```
.box2 {
    width: 100px;
    height: 100px;
    clip-path: ellipse(20px 40px at center center);
    background-color: #000;
}
```

裁剪矩形

语法：clip-path: inset()

属性值同margin、padding的属性值设置方式一致

设定一个值x，表示矩形区域距离上下左右的距离都是x
设定两个值x y，表示矩形区域距离上下的距离为x，左右的距离为y
设定三个值x y z，表示矩形区域，上边距为x，下边距为z，左右边距相同为y

设定四个值x y z p，表示矩形区域的上下左右边距分别为x y z p

.box1 {
    width: 100px;
    height: 100px;
    clip-path: inset(10px);
    background-color: #000;
}
.box2 {
    width: 100px;
    height: 100px;
    clip-path: inset(10px 20px);
    background-color: #000;
}
.box3 {
    width: 100px;
    height: 100px;
    clip-path: inset(10px 20px 30px);
    background-color: #000;
}
.box4 {
    width: 100px;
    height: 100px;
    clip-path: inset(10px 20px 30px 40px);
    background-color: #000;
}

此外，inset()还支持round属性值，属性值设置方式同border-radius（略，同上）

其效果也同border-radius，为矩形区域设置圆角

.box1 {
    clip-path: inset(10px round 5px);
}
.box2 {
    clip-path: inset(10px 20px round 5px 10px);
}
.box3 {
    clip-path: inset(10px 20px 30px round 5px 10px 15px);
}
.box4 {
    clip-path: inset(10px 20px 30px 40px round 5px 10px 15px 20px);
}

裁剪多边形

语法：clip-path: polygon(x1 y1, x2 y2, ...)
- x1、y1表示第一个点的坐标
- x2、y2表示第二个点的坐标
- polygon可以接收多个(x,y)坐标，以此类推，可以使用这个属性绘制任何形状

使用：

/* 三角形 */
.box1 {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background-color: #000;
}
/* 菱形 */
.box2 {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background-color: #000;
}
/* 五角形 */
.box3 {
    width: 100px;
    height: 100px;
    clip-path: polygon(
        50% 0,
        65% 40%,
        100% 40%,
        72% 60%,
        85% 100%,
        50% 75%,
        15% 100%,
        28% 60%,
        0 40%,
        35% 40%
    );
    background-color: #000;
}

【CSS】clip-path裁剪路径

clip-path

（1）clip-source

（2）geometry-box

（3）basic-shape

（1）`clip-source`

（2）`geometry-box`

（3）`basic-shape`