CSS3属性： clip-path

前言

本文主要是之前写的C3 clip-path 属性的描写

clip-path的介绍：

简单来说，clip-path 属性可以通过裁剪的方式创建元素的可显示区域，区域内的部分可以显示，区域外的隐藏。clip-path 属性比 clip 属性在功能上更加优越及方便。

clip-path的基本语法：

包括<clip-source>|<basic-shape>|<geometry-box>|<none>

• <clip-source> 用 <url> 表示剪切元素的路径
• <basic-shape> 设置所要定义的形状，属性有 Inset（） circle（） ellipse（） polygon（）
• <geometry-box> 包含：shape-box | fill-box | stroke-box | view-box

具体实例：

使用 clip-path 来绘制多边形：

• inset() 矩形：
  元素格式　inset(top　right　bottom　left　round　radius)；

示例： 有一个宽高为300px的色块（外围的黑边框是为了方便观察）

为其加上`

<pre>clip-path: inset(50px 50px 50px 50px round 20px);</pre>` 

如图所示4个参数，分别对应top、right、bottom、left的裁剪位置，而 round 则表示圆角半径。

• circle（）圆 ：
  元素格式　inset(radius at 圆心)；

加上

<pre>clip-path: circle(50% at 50% 50%);
clip-path: circle();/*或者*/</pre>

如图所示，圆的半径支持百分比，默认元素宽高中短的那个为直径，圆心默认为元素中心点。

• ellipse()椭圆：
  元素格式　ellipse(长轴 短轴 at 圆心)；| ellipse(短轴 长轴 at 圆心)；

<pre>clip-path: ellipse(20% 50% at 50% 50%);</pre>

在这里，椭圆的x,y轴半径默认是宽、高度的一半，同样也可以用百分比表示，椭圆圆心也是默认为元素中心点。

• polygon()多边形：
  元素格式 polygon(length length)
  括号内每对参数都代表一个顶点坐标，这里我实际操作一个简单的图形，便于理解

代码如下

<pre> clip-path: polygon(25% 20%, 100% 20%, 75% 80%, 0% 80%);</pre>

这是一个平行四边形，这里我偷个懒，还是直接用百分比来计算。我们已经知道平行四边形有四个顶点，这里我们有四对顶点座表，具体展示如图。以方向x和方向y，再根据顶点个数和所再位置，可以计算得出正确代码，这样，我们就可以根据这个功能设计出各种各样的图案了！