就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. clip-path

在此页

clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法 

/* 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 property is specified as one or a combination of the values listed below.

值

<clip-source>
A <url> referencing an SVG <clipPath> 元素。
<basic-shape>
A shape whose size and position is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box.
<geometry-box>
If specified in combination with a <basic-shape> , this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius ), to be the clipping path. The geometry box can be one of the following values:
margin-box
Uses the margin box as the reference box.
border-box
Uses the border box as the reference box.
padding-box
Uses the padding box as the reference box.
content-box
Uses the content box as the reference box.
fill-box

Uses the object bounding box as the reference box.

stroke-box

Uses the stroke bounding box as the reference box.

view-box
Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox 属性。
none

No clipping path is created.

注意 : A computed value other than none results in the creation of a new stacking context the same way that CSS opacity does for values other than 1 .

形式定义

初始值 none
适用于 all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
继承 no
百分比 refer 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-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()>
<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> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<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

范例

Comparison of HTML and SVG

  1. CSS
  2. CSS 参考
  3. CSS Masking
  4. 特性
    1. clip
    2. clip-path
    3. mask
    4. mask-border
    5. mask-border-mode
    6. mask-border-outset
    7. mask-border-repeat
    8. mask-border-slice
    9. mask-border-source
    10. mask-border-width
    11. mask-clip
    12. mask-composite
    13. mask-image
    14. mask-mode
    15. mask-origin
    16. mask-position
    17. mask-repeat
    18. mask-size
    19. mask-type

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1