likes
comments
collection
share

clip-path参数的详细介绍

作者站长头像
站长
· 阅读数 54

上篇文章我们介绍了 clip-path 的基本概述和一些主要参数，这次我们来详细介绍一些各个参数的详细用法

circle()语法

circle() 函数是 clip-path 的一种类型，它允许你定义一个圆形裁剪区域。

circle() 函数的基本语法如下：

clip-path: circle(shape-radius|closest-side| at position);
  • shape-radius: 定义了圆形的半径。这可以是一个长度值（如 px、em、% 等），也可以是一个百分比值（相对于元素的宽度或高度，取决于浏览器实现）。
  • position: 定义了圆形的位置。这是一个可选参数，如果省略，圆形将默认位于元素的中心。位置可以用两个值来指定，分别对应 X 和 Y 坐标。这些值可以是长度值、百分比值或 left、center、right、top、bottom 等关键字。

以下是一些使用 circle() 函数的示例：

  1. 简单的圆形裁剪：
.element {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(100px);
}

在这个例子中，.element 的可见区域是一个半径为 100px 的圆形，位于元素的中心。

  1. 自定义圆形位置：
.element {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(100px at 50% 50%); /* 这也等同于默认的居中位置 */
  /* 或者使用具体的像素值 */
  /* clip-path: circle(100px at 100px 100px); */
}

在这个例子中，我们明确指定了圆形的位置为 (50% 50%)，这实际上与默认位置相同（即元素的中心）。你也可以使用具体的像素值来指定位置。

  1. 使用百分比作为半径：
.element {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(50%); /* 半径为元素宽度的一半 */
}

在这个例子中，我们使用了百分比值来指定半径，这使得圆形的大小相对于元素的宽度进行调整。

查看效果最全实例 demo：jsrun.net/vpDKp

ellipse() 语法

在 CSS 的 clip-path 属性中，ellipse() 函数用于定义一个椭圆形的裁剪区域。ellipse() 函数的基本语法如下：

clip-path: ellipse(rx|closest-side|farthest-side ry|closest-side|farthest-side at cx|left|right cy|top|bottom);
  • rx：椭圆的水平半径（即椭圆在X轴方向上的半径），这个值可以是长度值（如像素、百分比等）或者是 auto。如果省略该值或设置为 auto，则浏览器会计算出一个值，使得椭圆与元素边界相切。
  • ry：椭圆的垂直半径（即椭圆在Y轴方向上的半径），同样可以是长度值或 auto。
    • closest-side表示距离圆心点最近的一个边到圆心的距离作为半径。
    • farthest-side表示距离圆心点最远的一个边到圆心的距离作为半径。
  • cx：椭圆的中心点的X坐标，可以是长度值或百分比。如果省略该值或设置为 50%，则中心点将位于元素的水平中心线上。
  • cy：椭圆的中心点的Y坐标，同样可以是长度值或百分比。如果省略该值或设置为 50%，则中心点将位于元素的垂直中心线上。
    • left top：元素左上角最为圆心
    • right top：元素右上角最为圆心
    • left bottom：元素左下角最为圆心
    • left bottom：元素右下角最为圆心
    • center center：元素中心圆心
    • left center：元素左中心圆心
    • right center：元素右中心圆心
    • center top：元素上中心圆心
    • center bottom：元素下中心圆心

示例

示例 1：基本椭圆

.element {
  clip-path: ellipse(50% 75%);
  /* 创建一个椭圆，其水平半径为元素宽度的50%，垂直半径为元素高度的75%。
     椭圆的中心位于元素的中心（因为cx和cy未指定，默认为50% 50%）。 */
}

示例 2：偏移椭圆中心

.element {
  clip-path: ellipse(50% 75% at 25% 50%);
  /* 创建一个椭圆，其水平半径为元素宽度的50%，垂直半径为元素高度的75%。
     椭圆的中心向左偏移到元素宽度的25%处，垂直位置仍然居中（因为cy为50%）。 */
}

示例 3：使用像素值

.element {
  clip-path: ellipse(100px 150px at 50px 75px);
  /* 创建一个椭圆，其水平半径为100像素，垂直半径为150像素。
     椭圆的中心位于(50px, 75px)的位置。 */
}

请注意，在使用 clip-path 时，需要确保元素的 position 属性设置为 relative、absolute、fixed 或 sticky，以便正确应用裁剪区域。此外，clip-path 的兼容性在不同浏览器中可能有所不同，因此在使用之前最好检查目标浏览器的支持情况。

查看效果最全实例 demo： jsrun.net/3kDKp

polygon()语法

polygon()函数允许你通过指定多边形的顶点坐标来裁剪元素，从而创建任意多边形形状的裁剪区域。以下是关于polygon()函数的详细使用说明：

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
  • x1 y1, x2 y2, x3 y3, ...：这些是定义多边形顶点的坐标对。每个坐标对表示一个顶点，并且至少需要三个顶点来定义一个多边形。

使用要点

  1. 坐标单位：坐标可以使用像素（px）、百分比（%）、视窗单位（vw, vh, vmin, vmax）等。百分比是相对于元素自身的宽度和高度。

  2. 坐标顺序：顶点的坐标对需要按照多边形的绘制顺序（顺时针或逆时针）来指定。坐标对的顺序决定了多边形的形状和方向。

  3. 闭合多边形：尽管polygon()在语法上不需要最后一个坐标与第一个坐标相同来闭合多边形，但在实际应用中，为了清晰和避免潜在的问题，最好确保它们是相同的。

  4. 兼容性：clip-path属性在一些较旧的浏览器中可能不被支持，如IE11之前的版本。为了兼容性，可以使用JavaScript库或Polyfill来模拟clip-path的效果。

示例

  1. 创建一个矩形：
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

这将创建一个与元素大小相同的矩形。

  1. 创建一个三角形：
clip-path: polygon(0 0, 100% 0, 50% 100%);

这将创建一个从左上角到右上角再到底部中心的三角形。

  1. 创建一个六边形：
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

这将创建一个与元素大小相同的六边形。

  1. 创建一个不规则多边形：
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);

这将创建一个不规则多边形，以逆时针从左上角开始。

案例 欣赏：jsrun.net/PkDKp/edit

注意事项

  • 确保你的坐标顺序是正确的，否则你可能会得到一个意想不到的多边形形状。
  • 使用百分比时，请确保你的元素有一个明确定义的宽度和高度，否则百分比可能无法正确计算。
  • 在实际应用中，clip-path可能会与其他CSS属性（如border-radius）产生交互效果，需要谨慎处理。
转载自:https://juejin.cn/post/7376148503088119834
评论
请登录