clip-path解析和使用

angrybird2332022-02-24FrontendCSS

什么是clip-path

CSS 中的 clip-path 属性允许您指定要显示的元素的特定区域，其余部分将被隐藏（或“裁剪”）掉。这可以用于创建有趣的形状，例如心形、星形、圆形、梯形、三角形等。

clip-path的属性值

clip-path 属性可以接受以下值：

none：默认值，不裁剪任何内容。
inset()：裁剪元素的内容，使其仅显示指定的矩形区域。
circle()：裁剪元素的内容，使其仅显示指定的圆形区域。
ellipse()：裁剪元素的内容，使其仅显示指定的椭圆区域。
polygon()：裁剪元素的内容，使其仅显示指定的多边形区域。
path()：裁剪元素的内容，使其仅显示指定的路径区域。
url()：裁剪元素的内容，使其仅显示指定的 SVG 路径区域。
inherit：从父元素继承 clip-path 属性的值。
initial：将 clip-path 属性设置为默认值。
unset：将 clip-path 属性重置为继承的值（如果存在）或默认值（如果未继承）。
revert：将 clip-path 属性重置为浏览器或用户设置的值（如果存在）或默认值（如果未设置）。

clip-path的语法

clip-path 属性的语法如下：

.element {
  clip-path: <clip-path-function>  
}

inset() 函数, 用于裁剪矩形区域

.element {
  clip-path: inset(<top> <right> <bottom> <left>, <radius values>); /* 4 values */
  /* 举例： */
  clip-path: inset(50px 50px 50px 50px round 50px 0 50px 0);
}

circle() 函数, 用于裁剪圆形区域

.element {
  clip-path: circle(<radius> [at <x> <y>]); /* circle(半径 at 水平坐标 垂直坐标) */
  /* 举例： */
  clip-path: circle(50px at 25px 25px); /* 圆心在元素中心，半径为50px */
}

ellipse() 函数, 用于裁剪椭圆区域

.element {
  clip-path: ellipse(<radius x radius y> [at <x> <y>]); /* circle(x半径 y半径 at 水平坐标 垂直坐标) */
  /* 举例： */
  clip-path: ellipse(100px 200px at 200px 200px); /* 半径为分别为100px 200px, 圆心在元素中心， */
}

polygon() 函数, 用于裁剪多边形区域

.element {
  clip-path: polygon(x1 y1, x2 y2, ..., xn yn); /* 多边形顶点坐标 xn yn 分别为坐标点百分比 */
  /* 举例： */
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);  /* 三角形 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);   /* 矩形 */
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);   /* 梯形 */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%); /* 正五边形 */
}

path() 函数, 用于裁剪自定义路径区域

.element {
  clip-path: path(<path-data>);
  /* 举例： */
  clip-path: path("M50 5 L63 40 L100 40 L70 60 L82 95 L50 75 L18 95 L30 60 L0 40 L37 40 Z"); /* 五角星 */
}

如果想要自定义path, 可以使用在线制作svg路径path的网站，来自定义路径复制路径代码，或者下载svg图片文件。
在线制作svgopen in new window

clip-path解析和使用

ON THIS PAGE