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