CSS Shapes 学习记录CSS Shape 可以实现矩形盒盒模型的限制，而且将网页设计提升到新的高度。他允许元素设

CSS Shape 可以实现矩形盒盒模型的限制，而且将网页设计提升到新的高度。他允许元素设计成不同的形状，并且用更自然的方式让文字环绕元素。

目前支持一下版本：

Chrome 34以上

Chrome Canary

Webkit Nightly

如果正使用Chrome浏览器（非Canary版本），可以粘贴以下代码到地址栏：著作权归作者所有。

shape-outside 属性允许我们使用一些不同的函数来定义形状：

inset() : 函数允许在浮动区域里定义一个内部矩形，定义矩形的top、right、 bottom、left 位置与定义margin 和 padding 相似。

shape-outside: inset(10px, 5px, 10px, 5px);

shape-outside: inset(1% round 5px 10px 5px 5px);著作权归作者所有。

shape-outside: inset(1%); //距离元素所有边缘相差 1%

shape-outside: inset(1% round 10px); //给元素一个10像素border-radius，其插图离图片边缘的长度差1%著作权归作者所有。

circle() 圆形

shape-outside: circle(50%);

shape-outside: circle(closest-side); //closest-side 计算从元素的边缘到中心的最近距离为圆形的半径，默认值

shape-outside: circle(farthest-side at left); //at 可以移动圆心

ellipse() 椭圆形

shape-outside: ellipse(25% 10%)

polygon 任意形状

shape-outside: ploygon(88% 0, 90% 15%, 83% 22%, 34% 43%, 100% 25%);

来源于图片

shape-outside: url(a.png);

shape-image-threshold: 0.0;