DevShelf

Appearance

clip-path ​

描述 ​

该 clip-path 属性创建一个有限的区域，用于确定元素的哪个部分应可见。区域内的部分可见，而区域外的部分隐藏。裁剪区域是定义为内部链接、外部 SVG 或形状（如圆形 （ circle（） ））的路径。

该 clip-path 属性已替换已弃用的剪辑属性。

提示

在线 CSS Clip-Path 生成器以查看正在使用的属性 clip-path 。

效果展示 ​

语法 ​

css
clip-path: <clip-source> | [ <basic-shape> || <geometry-box>] | none /* where */
  <clip-source> = <url> /* URL references an SVG <clipPath> element  */
  /* and */ <geometry-box> = <shape-box> | fill-box | stroke-box | view-box;

值 ​

  • <clip-source> 引用 SVG
  • <basic-shape> 区域的大小和位置由 的值确定。如果未定义几何图形，边框框将用作块。
  • <geometry-box> 如果与 结合使用定义，则此值定义基区域的块。如果单独设置，则定义块的边界，包括角度的形成（例如边界半径）。可以使用以下值之一确定几何图形：
    • fill-box 使用对象的边界作为基区域。
    • stroke-box 使用描边边界框作为基区域。
    • view-box 使用最近的 SVG 视口作为基本单位。如果为创建 SVG 视口的元素定义了 viewBox，则基本单位将定位在由 viewBox 属性设置的原始坐标系中，并且基本单位的宽度和高度将设置为 viewBox 属性的值。
    • margin-box 使用边距框作为基本单位。
    • border-box 使用边框框作为基本单位。
    • padding-box 使用填充框作为基本单位。
    • content-box 使用内容框作为基本单位。
  • none 不创建裁剪区域。