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
浙公網安備 33010602011771號