这篇文章给大家分享的是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的滤镜的方式实现网页变灰色，代码是什么

  我们可以根据实际的需要选择合适的CSS代码样式添加到自己的网页模板的代码中实现网页灰色、黑白样式。

• 用CSS怎样做三角形叠加放大的效果？

  相信有一点CSS基础的朋友应该都可以轻松实现一个css三角形，那么如果我们想要更酷炫的三角形效果要怎样做呢？其实我们可以用CSS3来做一个三角形叠加放大的特效，实现效果及代码如下，感兴趣的朋友可以参考。

• 基于Canvas怎样实现压缩图片上传功能

  这篇文章主要介绍了使用canvas压缩图片上传的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• css优先级规则怎么理解？一文快速读懂css优先级

  css是一种比较简单容易上手的描述语言，虽然编写css代码定义网页样式比较容易，但是很多人在写CSS过程总会遇到多种问题，例如css不生效，css效果不符合预期等等。这主要原因就是对css优先级不理解。那么什么是css优先级？css优先级规则是什么？

• 用CSS怎样实现导航固定，内容左右滑动的效果？

  这篇文章给大家分享的是用CSS怎样实现导航固定，内容左右滑动的效果。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，实现效果如下，感兴趣的朋友接下来一起跟随小编看看吧。