CSS的clip-path属性怎样用?简述clip-path使用示例

发布时间：2023-08-09 14:28:38 所属栏目：语言来源：

导读：这篇文章给大家分享的是CSS的clip-path属性的使用。clip-path属性能实现不规则图形的显示，在剪裁工具中有很大的用处，接下来给大家介绍以下各示例，对大家了解clip-path属性的使用有一定的参考价值，感兴趣的朋友接

这篇文章给大家分享的是CSS的clip-path属性的使用。clip-path属性能实现不规则图形的显示，在剪裁工具中有很大的用处，接下来给大家介绍以下各示例，对大家了解clip-path属性的使用有一定的参考价值，感兴趣的朋友接下来一起跟随小编看看吧。

    clip-path属性

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

    例子

div {

  width: 200px;

  height: 200px;

  background: #6c00af;

  -webkit-clip-path: polygon(

    28% 6%,

    71% 15%,

    100% 75%,

    18% 39%,

    63% 27%,

    16% 22%,

    65% 19%

  );

  clip-path: polygon(

    28% 6%,

    71% 15%,

    100% 75%,

    18% 39%,

    63% 27%,

    16% 22%,

    65% 19%

  );

}

    绘制cilp-path神器

    bennettfeely.com/clippy/

    语法

/* 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-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

    不创建的剪切路径。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!