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);
}

說明：

按照給定的漸變通過計算排除透明通道后得到的形狀，然后文字按照此形狀的邊緣進行環繞
最后補充一下案例演示地址：
http://jsrun.net/88aKp