clip-path

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

简介

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

语法

/* 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: 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: unset;

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

取值

<clip-source>
<url> 表示剪切元素的路径
<basic-shape>
一种形状,其大小和位置由<几何盒>值定义。如果没有指定几何框,则边框将用作参考框
<geometry-box>
如果同 <basic-shape> 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。几何框盒可以有以下的值中的一个:
margin-box
使用 margin box 作为引用框。
border-box
使用 border box 作为引用框。
padding-box
使用 padding box 作为引用框。
content-box
使用 content box 作为引用框。
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框(stroke bounding box)作为引用框
view-box
使用最近的 SVG 视口(viewport)作为引用框。如果viewBox 属性被指定来为元素创建 SVG 视口,引用框将会被定位在坐标系的原点,引用框位于由 viewBox 属性建立的坐标系的原点,引用框的尺寸用来设置 viewBox 属性的宽高值。
none
不创建的剪切路径。

正式语法

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

where
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

where
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box

where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

例子

HTML 与 SVG 之间的对比

完整示例

HTML

<img id="clipped" src="https://mdn.mozillademos.org/files/12668/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

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

结果

规范

Specification Status Comment
CSS Masking Module Level 1
clip-path
Candidate Recommendation Extends its application to HTML elements
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
clip-path
Recommendation Initial definition (applies to SVG elements only)
初始值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
适用媒体visual
计算值as specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clip-pathChrome Full support 55
Full support 55
Full support 23
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Notes
Full support 12
Notes
Notes Edge only supports clip paths defined by url().
Firefox Full support 3.5IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer only supports clip paths defined by url().
Opera Full support 42
Full support 42
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9.1
Full support 9.1
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 55
Full support 55
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 55
Full support 55
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4Opera Android Full support 42
Full support 42
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9.3
Full support 9.3
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
Full support 6.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
AnimationsChrome Full support 55Edge No support NoFirefox Full support 49IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 49Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support 6.0
<basic-shape>Chrome Full support 23Edge No support NoFirefox Full support 54
Full support 54
No support 47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 54
Full support 54
No support 47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
fill-box and stroke-boxChrome No support NoEdge No support NoFirefox Full support 51
Notes
Full support 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 51
Notes
Full support 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
On HTML elementsChrome Full support 23Edge No support NoFirefox Full support 3.5IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
path()Chrome No support NoEdge No support NoFirefox Full support 71
Full support 71
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
On SVG elementsChrome Full support 23Edge Full support 12Firefox Full support 52IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 52Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见