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

た入场券 2022-12-07 11:53 201阅读 0赞

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排除][CSS exclusion]模块中的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路径][SVG path] 。 提供的点是可以任意单位(例如：基于像素或基于百分比) **的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%);
    }

![Our starting image][]

![A triangle with clip-path][]

![X shape][A triangle with clip-path]

![Star shape][A triangle with clip-path]

## 圈 **(**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][A triangle with clip-path]

![Circle 2][A triangle with clip-path]

.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][A triangle with clip-path]

![Ellipse 2][A triangle with clip-path]

.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][A triangle with clip-path]

![Inset 2][A triangle with clip-path]

.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:

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

![Animating clip-path][A triangle with clip-path]

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之][Sketch]类的工具开始创建形状，然后将SVG标记复制到文本编辑器中。 在SVG标记中，只需将形状包装在clipPath元素中，然后将**clipPath**包装在defs块中。

Something like this for example:

例如：

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);
    }

![Clipping with an svg-shape][A triangle with clip-path]

--------------------

## 其他资源 **(**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][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`][clip-path_ has 95_ coverage]在全球浏览器中的[覆盖率达到95％][clip-path_ has 95_ coverage] ，但请确保包括`-webkit-clip-path`前缀的变体，但Safari仍然需要。

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-clipping-with-clip-path][https_www.digitalocean.com_community_tutorials_css-clipping-with-clip-path]

css中让图片剪切居中

[CSS exclusion]: https://drafts.csswg.org/css-exclusions-1/
[SVG path]: https://www.digitalocean.com/community/tutorials/svg-svg-paths
[Our starting image]: /images/20221123/91a2aceb697548b7a177a57f6c2fb604.png
[A triangle with clip-path]: /images/20221123/4a3f5152c6ed454aa6e882b586477a2e.png
[Sketch]: https://www.sketchapp.com/
[Clippy]: http://bennettfeely.com/clippy/
[clip-path_ has 95_ coverage]: http://caniuse.com/#feat=css-clip-path
[https_www.digitalocean.com_community_tutorials_css-clipping-with-clip-path]: https://www.digitalocean.com/community/tutorials/css-clipping-with-clip-path