文本环绕

今天翻网站的时候，发现一篇文章的右边的文字是一个45°斜角，刚开始以为是用了 <br/> 强制文章换行排成的一斜角，在一想这不对，然后发现了它 shape-outside ，然后百度到这篇文章，发现很有意思。

通过shape-outside来设置文字环绕时的形状

总结一下就是：

1.在一个有固定宽度的容器(比如 div)下面有两个子标签，A)包含要展示的文字(比如有固定宽度的 p 标签)，B)用来控制文字的环绕形状(有固定高宽的 img 图片或者空 div)

2.B 通过属性 float 控制文字在哪边环绕，shape-outside 控制文字的环绕形状，还能通过给容器添加属性 padding 左右，来辅助。

shape-outside 有4类展示方式

A. 函数值：

1. circle 画个圆，例如：circle(50% at left top) 画一个以 B 高宽50%的圆，环绕的中心在圆的左上，不写 at left top 那么默认就是环绕圆心，当中这里定位可以用 center | left | top | right | bottom，可以用百分数或者具体数值。

2. ellipse 画个椭圆和画圆用法一样，例如：ellipse(60px 50px at left top) 画一个60宽50高的椭圆。

3. inset 以 B 高宽的四方矩形设置上下左右偏移量和环绕圆弧度，例如：inset(10px 20px 5px 5px round 37%)。

4. polygon 画一个矩形，例如：polygon(50% 0px, 100% 50%, 50% 100%, 0px 50%) 通过 x,y 坐标方式定位顶点绘制矩形，3个顶点就是三角形，6个顶点就是六边形。

B. <url> 值：

1. url 一张图片，专门为 PNG 图片准备的，会自动计算图片中非透明区域，进行环绕。

C. 渐变值：

1. linear-gradient,例如：linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px)，这个我还没搞懂怎么用。

D. 关键字值：

none|margin-box|content-box|border-box|padding-box|initial|inherit|unset