css中让图片剪切居中_CSS中使用剪切路径进行剪切的简介

css中让图片剪切居中

介绍 (Introduction)

clip-path is a very interesting property that allows to clip the visible portion of SVG elements, images or any HTML element really.

clip-path是一个非常有趣的属性，它允许剪切SVG元素，图像或任何HTML元素的可见部分。

使用剪切路径定义基本形状 (Defining Basic Shapes With clip-path)

clip-path makes it easy to clip-out basic shapes using either of the polygon, ellipse, circle or inset keywords, which are part of the CSS exclusion module.

使用clip-path可以轻松使用CSS排除模块中的polygon ， ellipse ， circle或inset关键字来剪切基本形状。

多边形 (Polygon)

Polygon is the most flexible of all the available shapes because it allows you to specify any amount of points, a little bit like an SVG path. The provided points are pairs of X and Y coordinates that can be of any unit (eg: pixel or percent-based). Because it’s the most flexible, it’s also the most complex and you’ll probably want to use a tool to define your points.

多边形是所有可用形状中最灵活的，因为它允许您指定任意数量的点，有点像SVG路径 。 提供的点是可以任意单位(例如：基于像素或基于百分比) 的X和Y坐标对 。 因为它是最灵活的，所以它也是最复杂的，您可能需要使用一种工具来定义您的点。

Let’s illustrate with an example. First you’ll see our starting image, then our image with a clip-path applied to get a triangle shape, followed by a more complex X-shape, and then finally a star shape:

让我们用一个例子来说明。 首先，您将看到我们的初始图像，然后是应用了剪切路径的图像以获得三角形的形状，然后是更复杂的X形状，最后是星形：

/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

圈 (Circle)

Circles are defined with this syntax: circle(radius at posX posY). The position is optional and will default to 50% 50%. Here are two examples to illustrate:

圆使用以下语法定义： circle(posX posY处的半径) 。 该位置是可选的，默认为50％50％ 。 这是两个例子说明：

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

椭圆 (Ellipse)

Ellipses are defined using this syntax: ellipse(radiusX radiusY at posX posY). Once again, the position is optional and will default to 50% 50%. Here are two examples:

使用以下语法定义椭圆： ellipse(posX posY处的radiusX radiusY) 。 同样，该位置是可选的，并且默认为50％50％ 。 这是两个示例：

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

插图 (Inset)

With inset you can define an inner rectangle and everything outside will be cut-out. This makes it easy to effectively crop an image or an element directly in the browser. You can also make the rectangle rounded with the round keyword and a border radius value:

使用插图，您可以定义一个内部矩形，外部的所有内容都将被切除。 这样可以轻松有效地直接在浏览器中裁剪图像或元素。 您还可以使用round关键字和边框半径值将矩形四舍五入：

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
  clip-path: inset(45% 0% 33% 10% round 10px);
}

动画和转场 (Animations and Transitions)

Animations and transitions can also be applied with clip-path to create interesting effects. Just make sure that all the steps in your animation contains the same amount of points. Let’s demonstrate with an example:

动画和转场也可以与剪切路径一起使用，以创建有趣的效果。 只要确保动画中的所有步骤都包含相同数量的点即可。 让我们用一个例子来演示：

Here’s the CSS rules used to create this animation:

这是用于创建此动画CSS规则：

.trigger-btn:hover + img {
  animation: magic 4s infinite;
}

@keyframes magic {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

自定义SVG形状 (Custom SVG Shapes)

You can also define any arbitrary SVG shape to act as the clip-path value. You’ll obviously want to start in a tool like Sketch to create your shape and then copy the SVG markup into a text editor. In your SVG markup, simply wrap your shape in a clipPath element and wrap the clipPath in a defs block.

您还可以定义任何任意的SVG形状以用作剪切路径值。 显然，您将需要从诸如Sketch之类的工具开始创建形状，然后将SVG标记复制到文本编辑器中。 在SVG标记中，只需将形状包装在clipPath元素中，然后将clipPath包装在defs块中。

Something like this for example:

例如：

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>

And now you can apply the defined shape as the clip-path value using the url keyword and the id of the SVG shape:

现在，您可以使用url关键字和SVG形状的ID将定义的形状应用为剪切路径值：

.svg-shape {
  -webkit-clip-path: url(#my-shape);
  clip-path: url(#my-shape);
}

---

---

其他资源 (Additional Resources)

• Clippy, a great tool to help you define your clip-path values.

  Clippy ，一个很棒的工具，可以帮助您定义剪切路径值。

• Browser Support: As of 2020, clip-path has 95% coverage in browsers worldwide, but be sure to include the -webkit-clip-path prefixed variants, which are still required by Safari.

  浏览器支持：截至2020年， clip-path在全球浏览器中的覆盖率达到95％ ，但请确保包括-webkit-clip-path前缀的变体，但Safari仍然需要。

翻译自: https://www.digitalocean.com/community/tutorials/css-clipping-with-clip-path

css中让图片剪切居中