1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. Properties
  5. clip-path

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

clip-path

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

* Some parts of this feature may have varying levels of support.

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

尝试一下

clip-path: circle(40%); 
clip-path: ellipse(130px 140px at 10% 20%); 
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z"); 
clip-path: rect(5px 145px 160px 5px round 20%); 
clip-path: xywh(0 5px 100% 75% round 15% 0); 
<section class="default-example" id="default-example"> <div class="example-container"> <img class="transition-all" id="example-element" src="/shared-assets/images/examples/balloon-small.jpg" width="150" /> We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth. </div> </section> 
section { align-items: flex-start; } .example-container { text-align: left; padding: 20px; } #example-element { float: left; width: 150px; margin: 20px; }

语法

css
/* Keyword values */ clip-path: none; /* <clip-source> values */ clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse(50px 60px at 10% 20%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path( "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" ); /* Box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* Global values */ clip-path: inherit; clip-path: initial; clip-path: revert; clip-path: revert-layer; clip-path: unset;

clip-path 属性指定为下面列出的值的一个或多个值的组合。

取值

<clip-source>

用 <url> 引用 SVG 的 <clipPath> 元素

<basic-shape>

一种形状，其大小和位置由 <geometry-box> 的值定义。如果没有指定 <geometry-box>，则将使用 border-box 用为参考框。取值可为以下值中的任意一个：

inset()

定义一个 inset 矩形。

circle()

定义一个圆形（使用一个半径和一个圆心位置）。

ellipse()

定义一个椭圆（使用两个半径和一个圆心位置）。

polygon()

定义一个多边形（使用一个 SVG 填充规则和一组顶点）。

path()

定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。

<geometry-box>

如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 border-radius 定义的剪切路径）。几何框盒可以有以下的值中的一个：

margin-box

使用 margin box 作为引用框。

border-box

使用 border box 作为引用框。

padding-box

使用 padding box 作为引用框。

content-box

使用 content box 作为引用框。

fill-box

利用对象边界框（object bounding box）作为引用框。

stroke-box

使用笔触边界框（stroke bounding box）作为引用框。

view-box

使用最近的 SVG 视口（viewport）作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。

none

不创建剪切路径。

备注：CSS 计算值不为 none 时，会创建新的层叠上下文，就像 CSS opacity 的值不为 1 时那样。

形式定义

初始值none
适用元素all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
是否是继承属性否
Percentagesrefer to reference box when specified, otherwise border-box
计算值as specified, but with <url> values made absolute
动画类型yes, as specified for <basic-shape>, otherwise no

形式语法

clip-path = 
 <clip-source> |
 [ <basic-shape> || <geometry-box> ] |
 none 

<clip-source> = 
 <url> 

<geometry-box> = 
 <shape-box> |
 fill-box |
 stroke-box |
 view-box 

<shape-box> = 
 <visual-box> |
 margin-box |
 half-border-box 

<visual-box> = 
 content-box |
 padding-box |
 border-box

示例

HTML 与 SVG 之间的对比

css
html, body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: 0.5em; padding: 0.5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: 0.5em 0.5em 0; font: 0.8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position: relative; } .container:before { content: "margin"; position: absolute; top: 2px; left: 2px; font: italic 0.6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #efefef inset, -1rem -1rem 0 #efefef inset; } .container.viewbox:after { content: "viewbox"; position: absolute; left: 1.1rem; top: 1.1rem; font: italic 0.6em sans-serif; } .cell span { display: block; margin-bottom: 0.5em; } p { font-family: sans-serif; background: #000; color: pink; margin: 2em; padding: 3em 1em; border: 1em solid pink; width: 6em; } .none { clip-path: none; } .svg { clip-path: url(#myPath); } .svg2 { clip-path: path( "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z" ); } .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } .shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } .shape6 { clip-path: margin-box circle(25% at 25% 25%); } .shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-anchor: middle; } svg text.em { font-style: italic; }

完整示例

HTML

html
<img id="clipped" src="mdn.svg" alt="MDN logo" /> <svg height="0" width="0"> <defs> <clipPath id="cross"> <rect y="110" x="137" width="90" height="90" /> <rect x="0" y="110" width="90" height="90" /> <rect x="137" y="0" width="90" height="90" /> <rect x="0" y="0" width="90" height="90" /> </clipPath> </defs> </svg> <select id="clipPath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"> path </option> </select>

CSS

css
#clipped { margin-bottom: 20px; clip-path: url(#cross); }

结果

规范

Specification
CSS Masking Module Level 1
# the-clip-path

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content