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的色块（外围的黑边框是为了方便观察