shape-outside 使用
shape-outside 属性用来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。也就是说，当元素浮动的时候，元素周围的文字内容以何种方式环绕。
语法：
shape-outside: keyword | [keyword] Function | url | gradient | global
具体值说明：
关键字值
none
none: 不对浮动区域进行任何设置，使用浏览器的默认行为，文字以浮动元素的margin进行围绕;
margin-box
margin-box： 环绕文字按照浮动元素的外边距边界进行围绕；
border-box
content-box：环绕文字按照浮动元素的边框边界进行围绕；
padding-box;
padding-box：环绕文字按照浮动元素的内边距边界进行围绕；
content-box;
content-box：环绕文字按照浮动的内容区域进行围绕；
备注说明：
这里可以给浮动元素设置border-radius属性来实现文字以圆形环绕的效果
函数值
circle()
语法：
element{
shape-outside: circle(shape-radius at position );
}
说明：
表示浮动文字按照`shape-radius`为半径画出的圆形的外边缘围绕
参数：
-
shape-radius：所画圆形的半径值，可以是像素，也可以是百分比 -
position：圆心的位置，如果不给定则以元素中心点为圆心；取一个值表示圆心在x轴和y轴都取相同值，取两个值第一个值表示圆心在x轴距离，第二个值表示圆心在y轴距离； -
at: 连接半径和圆心的关键字；
ellipse()
语法：
element{
shape-outside: ellipse(xr yr at position | [xp yp]);
}
说明：
表示浮动文字按照：x轴以xr为半径，y轴以yr为半径画出的椭圆形的外边缘围绕
参数：
-
xr：表示椭圆形的x轴半径长度 -
yr：表示椭圆形的y轴半径长度 -
at：连接半径和圆心的关键字 -
position：圆心的位置：一个值 | 两个值；一个值表示圆心在x轴和y轴都取相同值，两个值第一个值表示圆心在x轴距离，第二个值表示圆心在y轴距离
inset()
语法：
element{
shape-outside: inset(pt pr pb pl)
}
说明：
表示浮动文字按照：上 右 下 左 在浮动元素上的偏移量得出的矩形边缘进行围绕
参数：
- pt: 表示矩形的上边距位于元素上边线的偏移位置；
- pr: 表示矩形的右边距位于元素右边线的偏移位置；
- pb: 表示矩形的下边距位于元素下边线的偏移位置；
- pl: 表示矩形的左边距位于元素左边线的偏移位置；
polygon()
语法：
element{
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
}
说明：
polygon(x1 y1, x2 y2, ..., xn yn)：表示浮动元素按照：通过给定的坐标点的值连接画出的不规则形状的边缘进行围绕
参数说明：
-
x1：表示第一个点在x轴的坐标位置 -
y1：表示第一个点在y轴的坐标位置 -
x2：表示第二个点在x轴的坐标位置 -
y3：表示第二个点在y轴的坐标位置 -
xn：表示第n个点在x轴的坐标位置 -
yn：表示第n个点在y轴的坐标位置
url()
语法：
element{
shape-outside: [keyword] url(image.png);
}
说明：
文字通过给定的图片，并且通过计算图片的透明度后获取的形状区域进行围绕，这里需要注意的是此效果必须在服务器端预览，本地预览回报图片跨域问题，给定的图片必须是有透明区域的图片
linear-gradient()
语法：
element{
shape-outside: linear-gradient(, rgba(255, 255, 255, 0) 150px, red 150px);
}
说明：
按照给定的渐变通过计算排除透明通道后得到的形状，然后文字按照此形状的边缘进行环绕