这篇文章给大家分享的是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

    不创建的剪切路径。

    关于CSS的clip-path属性的使用就介绍到这了，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习CSS的使用有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何用CSS实现弧线旋转的Loading动画

  如何使用CSS 实现动态线条 Loading 动画？下面本篇文章介绍一下使用css实现动态弧形线条长短变化的Loading动画的3种方法，希望对大家有所帮助！

• 用css如何做一个文字动画效果？一文带你看懂

  今天给大家分享的是用css做一个文字动画效果的内容，本文实现的动画效果比较简单，但是对新手学习和了解CSS动画效果的实现有一定的帮助，有需要的朋友可以参考一下，下面一起跟随小编来学习一下吧。

• HTML5中外链嵌入页面通信怎么实现，方法是什么

  这篇文章主要介绍了html5关于外链嵌入页面通信问题(postMessage解决跨域通信),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS弹性布局中内容对齐是怎样的

  本文主要给大家讲述了有关于CSS之弹性布局内容对齐内容，内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

• 利用CSS3 中filter属性怎样使网页变灰色或者黑色模式？

  这篇文章主要给大家分享使用CSS3中filter属性来实现网页灰色或者黑色模式，本文有示例代码，具有一定的借鉴价值，感兴趣的朋友可以参考参考，下面我们就来一起学习下。