概述
本文详细介绍CSS Shapes布局，它能打破web中矩形盒模型的限制，使文字能环绕基础图形，PNG，SVG图像，以及渐变图形的布局效果；
兼容性较好，大部分高版本浏览器已支持。
Shapes布局相关属性:
shape-outside
shape-margin
shape-image-threshold
shape-outside
shape-outside是不规则形状环绕布局的核心，支持的属性值分为如下四大类：
1.none – 默认值。
2. – 图形盒子。
3. – 基本图形函数。
4. – 图像类。
**默认值:**表示就是普通的矩形环绕;
**图形盒子:**分别是margin-box，border-box，padding-box和content-box。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。
**基本图形函数:**指的是基本形状函数，和CSS clip-path剪裁属性支持的基本形状函数一模一样;如circle(),ellipse()等；
**图像类:**图像类，包括URL链接图片，渐变图像，cross-fade()，element()等
不同类型属性值使用示意:
/* 关键字值 */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;
/* 函数值 */
shape-outside: circle(); 圆
shape-outside: ellipse(); 椭圆
shape-outside: inset(10px 10px 10px 10px); 矩形
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); 多边形
/* 值 */
shape-outside: url(image.png);
/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
shape-margin
虽然该属性包含了margin，但是行为表现和CSS的margin属性却有很大的差别。首先，shape-margin只支持1个值，margin则1~4个；然后shape-margin的有效数值范围是有限制的，从0到浮动元素的边界（此时布局效果表现如同普通浮动布局）。
通俗的就是文字围绕边缘的间距，当大于浮动元素的边界时，就不再变化；
shape-image-threshold
threshold这个单词是“阈(yu)值”的意思，shape-image-threshold指图像环绕时候的半透明阈值，默认是0.0，也就是图像透明度为0的区域边界才能环绕。
同理，如果值是0.5表示透明度小于0.5的区域都可以文字环绕。
分别展示了如下阈值的环绕表现：
shape-image-threshold: 0.0;
shape-image-threshold: 0.3;
shape-image-threshold: 0.6;
shape-image-threshold: 0.8;
案例：iPhone X刘海头
实现环绕iPhone X刘海头的效果