CSS规范新增了一个模块:CSS Shapes,shape-outside属性属于该模块,它能影响浮动元素周边内容流的形状(即浮动形状),可接收三类值:形状盒子、函数和图像。
一、形状盒子
形状盒子(shape box)会指定形状的边界,既能单独使用,也能与另外两类值组合使用,可选的关键字如下所列,其中margin-box是shape-outside属性的默认值。
(1)margin-box:以外边距为界。
(2)border-box:以边框为界。
(3)padding-box:以内边距为界。
(4)content-box:以内容为界。
下图演示了四种形状盒子的效果,外边距、边框和内边距都设为了10px,代码中只列出了关键样式,并只举了其中的一种情况。
<style> .container { overflow: hidden; } div { float: left; padding: 10px; margin: 10px; border: 10px solid #FC0; background: #F60; background-clip: content-box; } .border-box { shape-outside: border-box; } </style> <section class="container"> <div class="border-box">border-box</div> <p>My name is Strick.</p> <p>My name is Strick.</p> <p>My name is Strick.</p> <p>My name is Strick.</p> <p>My name is Strick.</p> </section>
二、函数
有4个形状函数可供选择,分别是circle()、ellipse()、inset()以及polygon()。
1)circle()
第一种是圆形,可定义半径和圆点位置,例如浮动元素的宽高都为100px,圆的半径为50px,样式如下所示,效果如下图所示,其中白色边框的圆就是计算出的浮动形状。
div { float: left; width: 100px; height: 100px; shape-outside: circle(50px); }
接下来指定圆点的位置,需要使用at关键字将半径和位置分隔。在下面的样式中,圆点处在元素的右上角,注意观察下图中的浮动形状,它超出了元素的边界,超出部分默认会被裁剪掉。
div { shape-outside: circle(50px at right top); }
当用百分数指定半径时,需要有个参照值,该值得通过下面的公式计算得到,其中width是形状盒子的宽,height是其高。
假设半径为10%,浮动元素的上下外边距为10px,因为默认是以外边距为界限,所以此处形状盒子的高度为120px,宽度仍然是100px,那么通过计算后得到的参照值约等于110px,半径就是11px,效果如下图所示。
div { margin: 10px 0; shape-outside: circle(10%); }
2)ellipse()
第二种是椭圆,与圆形类似,也需要定义半径和圆点位置。只是它需要两个半径,第一个是横轴半径,第二个是纵轴半径。在下面的示例中,浮动元素的宽为100px,高为60px,将浮动形状声明为椭圆,效果如下图所示。
div { float: left; width: 100px; height: 60px; shape-outside: ellipse(50px 30px); }
横轴上的百分数半径参照形状盒子的宽度,纵轴上的百分数半径参照形状盒子的高度,下面定义的百分数半径经过计算后得到的值为50px和40px,效果如下图所示。
div { margin: 10px 0; shape-outside: ellipse(50% 50%); }
3)inset()
第三种是嵌入在形状盒子中的内部矩形,它能接收一组值,分别表示上右下左向内偏移的距离,还能接收一个可选的圆角,以round关键字分隔。
在下面的示例中,虽然只提供了两个值,但CSS会根据现有的值确定其余值,内部矩形距离形状盒子的顶端和底端是20px,左右边界是10px,形状盒子的宽为100px,高为80px,效果如下图所示。
div { float: left; width: 100px; height: 60px; margin: 10px 0; shape-outside: inset(20px 10px); }
下面的样式为内部矩形添加了20px的圆角,效果如下图所示。
div { shape-outside: inset(20px 10px round 20px); }
当内部矩形的偏移值是百分数时,左右偏移参照的是形状盒子的宽,上下偏移参照的是其高。例如参数值为20%,那么计算出的左右偏移值是20px,上下偏移值是16px,效果如下图所示。
div { shape-outside: inset(20%); }
4)polygon()
第四种是多边形,它能接收一系列坐标对,相对于形状盒子的左上角计算,将所有的点连接起来就是最终的形状。根据下面的polygon()函数中的四组坐标可描绘出一个直角梯形,如下图所示。
div { float: left; width: 100px; height: 80px; shape-outside: polygon(10px 10px, 20px 10px, 40px 50px, 10px 50px); }
当坐标是百分数时,横坐标参照形状盒子的宽,纵坐标参照其高,下面定义的坐标,效果与上图一致。
div { shape-outside: polygon(10% 12.5%, 20% 12.5%, 40% 62.5%, 10% 62.5%); }
有一种简便的方式创建多边形,那就是使用Chrome的浏览器插件:CSS Shapes Editor,用拖拽鼠标的方式得到想要的多边形,再将参数复制到样式表中,如下图所示。
三、图像
当形状很复杂时,直接画多边形会非常麻烦,不过shape-outside属性可基于图像的透明度(alpha值)来绘制形状,即形状轮廓会沿着非透明区域的边缘生成。
例如有一个五角星,如果边以外的地方都是透明的,那么周围的内容就会贴着五角星的边,如下图所示。
div { float: left; width: 100px; height: 100px; shape-outside: url(./star.png); }
注意,url()函数中的图像不能直接从本地加载,必须从Web服务器中读取,如此引用的图像会有HTTP首部信息,用于判断是否跨域。
1)shape-image-threshold
该属性可指定透明度阈值,修改形状边界,其取值范围是0~1,值越小透明度越高。对于透明度低于该值的部分,会包含在浮动形状中,而高于的则不包含。
例如将该值设为1时,就表示没有浮动形状,即整张图像都不在浮动形状中,如下图所示。
div { shape-image-threshold: 1; }
2)shape-margin
该属性可指定浮动形状的外边距。在下面的示例中会添加10px的外边距,效果如下图所示。
div { shape-margin: 10px; }
注意,shape-margin属性的百分数的计算方式与普通的外边距相同,参照的也是包含块的宽度。假设div元素的包含块的宽度为220px,那么10%的外边距经过计算后得到的值为22px,效果如下图所示。
div { shape-margin: 10%; }