css 裁剪图像

📌 相关文章

📜 css 裁剪图像 - CSS (1)

📅 最后修改于: 2023-12-03 15:00:09.504000 🧑 作者: Mango

在前端开发中，我们经常会遇到需要将图片进行裁剪的情况。而 CSS 提供了一种简单的方式来进行图像裁剪，它可以帮助我们快速地改变图片的显示方式和搭配其他样式进行布局。

CSS 属性 clip-path

CSS 属性 clip-path 可以用于裁剪图像，它允许我们指定一个剪切路径，所有在路径之外的部分都会被裁剪掉。可以将 clip-path 应用到任何元素中，包括 img、div、svg 等。

剪切路径的类型

clip-path 支持多种剪切路径的类型，包括：

圆形剪切路径
椭圆形剪切路径
正多边形剪切路径
不规则多边形剪切路径
路径剪切路径（SVG 路径）

圆形剪切路径

圆形剪切路径可以使用圆心坐标和半径来定义，示例代码如下：

.circle {
  clip-path: circle(50% at center);
}

circle() 函数用来定义圆形剪切路径，其中 50% 表示半径的大小，at center 表示圆心位置在元素中心。

椭圆形剪切路径

椭圆形剪切路径与圆形剪切路径类似，只需要将圆心的 x 轴半径和 y 轴半径分别指定即可，示例代码如下：

.ellipse {
  clip-path: ellipse(50% 30% at center);
}

ellipse() 函数用来定义椭圆形剪切路径，其中 50% 和 30% 分别表示 x 轴半径和 y 轴半径，at center 表示圆心位置在元素中心。

正多边形剪切路径

正多边形剪切路径可以通过指定边数来创建不同大小的多边形，示例代码如下：

.polygon {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

polygon() 函数用来定义多边形剪切路径，其中每个坐标点表示多边形的一个顶点位置。

不规则多边形剪切路径

不规则多边形剪切路径可以通过指定多个坐标点来创建不同形状的多边形，示例代码如下：

.path {
  clip-path: path("M0 0 L100 0 L50 100 Z");
}

path() 函数用来定义路径剪切路径，其中 M 表示起始点，L 表示终止点，Z 表示结束路径。

剪切路径的使用示例

下面的代码演示了如何使用剪切路径来裁剪图像，将圆形、椭圆形、正多边形和不规则多边形剪切路径应用到了不同的图片中。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Clip Path</title>
    <style>
      img {
        width: 200px;
        height: 200px;
        margin: 10px;
        object-fit: cover;
      }
      .circle {
        clip-path: circle(50% at center);
      }
      .ellipse {
        clip-path: ellipse(50% 30% at center);
      }
      .polygon {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      .path {
        clip-path: path("M0 0 L100 0 L50 100 Z");
      }
    </style>
  </head>
  <body>
    <img class="circle" src="https://picsum.photos/id/10/300/300" alt="Circle">
    <img class="ellipse" src="https://picsum.photos/id/20/300/300" alt="Ellipse">
    <img class="polygon" src="https://picsum.photos/id/30/300/300" alt="Polygon">
    <img class="path" src="https://picsum.photos/id/40/300/300" alt="Path">
  </body>
</html>

CSS Clip Path 示例

总结

CSS 的 clip-path 属性可以通过指定剪切路径来裁剪图像，支持多种剪切路径类型，非常灵活和方便。在实际开发中，我们可以根据不同需求选择合适的剪切路径类型来达到最佳的效果。