注意
本文所实现的功能，在浏览器的支持上并不好，除chrome浏览器外其余的大部分浏览器均不支持，虽然可以使用polyfill解决，但也不能很好的支持，有时也会出错
polyfill使用方法
下载polyfill，将其放入工程中，然后引用就可以了：<script src=‘js/shapes-polyfill.js‘></script>。具体使用方法，参考GitHub
用途
本文主要介绍使用Shape形状改变旁边内容的布局，这里的内容主要是指文字。
描述CSS中集合图形的使用，对于level 1（候选标准）来说，可以使用形状属性改变形状旁边内容流布局。
属性
shape-outside
使用形状改变旁边内容的布局流，这里的内容指的是文字。
语法
shape-outside:none|[<basic-shape>||<shape-box>]|<image>
使用形状改变旁边内容的布局流，默认值为none
<basic-shape>：使用基本shapes函数绘制基本形状
<shape-box>：利用盒模型得到形状
<image>：从外部图像中获取形状
注意：只适用于float元素
shape-inside
使用相撞改变内部内容的布局流（语法暂时不稳定不推荐使用）
shape-margin
形状与旁边内容的距离
shape-image-threshold
适用于从外部图像中获取形状，设置阈值。即设置文字覆盖到图片的什么位置。如下图
正常情况下，显示如下
设置了shape-image-threshold为10的情况显示如下
绘制基本形状
绘制矩形
语法
inset()=inset(<shape-arg>{1,4}[round<border-radius>]?)
- inset可以接受1-4个参数，类似于margin四个值的指定（上右下左）。
- border-radius为可选参数，定义矩形的圆角
绘制圆形
语法
circle() = circle( [<shape-radius>]? [at <position>]? )
- 默认为一个圆心在元素中心的的圆
- shape-radius为可选参数，代表圆的半径。可以为数字、百分比，不可为负数；还可以为closest-side(近端)、farthest-side(远端)两个关键字。
- position为可选参数，代表圆心位置
绘制椭圆形
语法
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
- 默认为一个圆心在元素中心的的圆。
- shape-radius为可选参数，两个值分别代表x轴、y轴半径。可以为数字、百分比，不可为负数；还可以为closest-side(近端)、farthest-side(远端)两个关键字。
- position为可选参数，代表圆心位置
绘制多边形
语法
polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
- fill-rule为可选参数，代表多边形的填充规则。可以接受nonzero、evenodd作为参数。
- shape-arg代表多边形顶点坐标，每一对表示一个点，至少需要三个点
绘制多边形可以使用chrome（谷歌）浏览器CSS Shapes Editor for Chrome插件进行可视化手动设置。在chrome浏览器中的开发者工具（Ctrl+Shift+I）可以看到
利用盒模型得到形状
语法
<shape-box> = border-box | padding-box | content-box | margin-box
盒模型其实就是通过css设置的盒子样式，主要是对边框进行设置
例子
border:10px solid #000;
border-radius:50%;
margin:20px;
<!-- 使用margin-box，以上设置，margin会有作用 -->
shape-outside:margin-box;
<!-- 使用padding-box，以上设置，margin不会有作用 -->
shape-outside:padding-box;
从外部图像中获取形状
语法
shape-outside: url("");
- url是图片路径
- 使用外部图像得到形状，需要图像具有一个alpha通道。
- 图像中alpha超过阈值的像素将会被用来定义形状。
- 阈值由shape-image-threshold属性指定，默认值为0
因Demo中设计到多个文件，这里提供demo源码下载
