CSS躬行记(4)——浮动形状

  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>

CSS躬行记(4)——浮动形状

二、函数

  有4个形状函数可供选择,分别是circle()、ellipse()、inset()以及polygon()。

1)circle()

  第一种是圆形,可定义半径和圆点位置,例如浮动元素的宽高都为100px,圆的半径为50px,样式如下所示,效果如下图所示,其中白色边框的圆就是计算出的浮动形状。

div {
float: left;
width: 100px;
height: 100px;
shape-outside: circle(50px);
}

CSS躬行记(4)——浮动形状

  接下来指定圆点的位置,需要使用at关键字将半径和位置分隔。在下面的样式中,圆点处在元素的右上角,注意观察下图中的浮动形状,它超出了元素的边界,超出部分默认会被裁剪掉。

div {
shape-outside: circle(50px at right top);
}

CSS躬行记(4)——浮动形状

  当用百分数指定半径时,需要有个参照值,该值得通过下面的公式计算得到,其中width是形状盒子的宽,height是其高。

CSS躬行记(4)——浮动形状

  假设半径为10%,浮动元素的上下外边距为10px,因为默认是以外边距为界限,所以此处形状盒子的高度为120px,宽度仍然是100px,那么通过计算后得到的参照值约等于110px,半径就是11px,效果如下图所示。

div {
margin: 10px 0;
shape-outside: circle(10%);
}

CSS躬行记(4)——浮动形状

2)ellipse()

  第二种是椭圆,与圆形类似,也需要定义半径和圆点位置。只是它需要两个半径,第一个是横轴半径,第二个是纵轴半径。在下面的示例中,浮动元素的宽为100px,高为60px,将浮动形状声明为椭圆,效果如下图所示。

div {
float: left;
width: 100px;
height: 60px;
shape-outside: ellipse(50px 30px);
}

CSS躬行记(4)——浮动形状

  横轴上的百分数半径参照形状盒子的宽度,纵轴上的百分数半径参照形状盒子的高度,下面定义的百分数半径经过计算后得到的值为50px和40px,效果如下图所示。

div {
margin: 10px 0;
shape-outside: ellipse(50% 50%);
}

CSS躬行记(4)——浮动形状

3)inset()

  第三种是嵌入在形状盒子中的内部矩形,它能接收一组值,分别表示上右下左向内偏移的距离,还能接收一个可选的圆角,以round关键字分隔。

  在下面的示例中,虽然只提供了两个值,但CSS会根据现有的值确定其余值,内部矩形距离形状盒子的顶端和底端是20px,左右边界是10px,形状盒子的宽为100px,高为80px,效果如下图所示。

div {
float: left;
width: 100px;
height: 60px;
margin: 10px 0;
shape-outside: inset(20px 10px);
}

CSS躬行记(4)——浮动形状

  下面的样式为内部矩形添加了20px的圆角,效果如下图所示。

div {
shape-outside: inset(20px 10px round 20px);
}

CSS躬行记(4)——浮动形状

  当内部矩形的偏移值是百分数时,左右偏移参照的是形状盒子的宽,上下偏移参照的是其高。例如参数值为20%,那么计算出的左右偏移值是20px,上下偏移值是16px,效果如下图所示。

div {
shape-outside: inset(20%);
}

CSS躬行记(4)——浮动形状

4)polygon()

  第四种是多边形,它能接收一系列坐标对,相对于形状盒子的左上角计算,将所有的点连接起来就是最终的形状。根据下面的polygon()函数中的四组坐标可描绘出一个直角梯形,如下图所示。

div {
float: left;
width: 100px;
height: 80px;
shape-outside: polygon(10px 10px, 20px 10px, 40px 50px, 10px 50px);
}

CSS躬行记(4)——浮动形状

  当坐标是百分数时,横坐标参照形状盒子的宽,纵坐标参照其高,下面定义的坐标,效果与上图一致。

div {
shape-outside: polygon(10% 12.5%, 20% 12.5%, 40% 62.5%, 10% 62.5%);
}

  有一种简便的方式创建多边形,那就是使用Chrome的浏览器插件:CSS Shapes Editor,用拖拽鼠标的方式得到想要的多边形,再将参数复制到样式表中,如下图所示。

CSS躬行记(4)——浮动形状

三、图像

  当形状很复杂时,直接画多边形会非常麻烦,不过shape-outside属性可基于图像的透明度(alpha值)来绘制形状,即形状轮廓会沿着非透明区域的边缘生成。

  例如有一个五角星,如果边以外的地方都是透明的,那么周围的内容就会贴着五角星的边,如下图所示。

div {
float: left;
width: 100px;
height: 100px;
shape-outside: url(./star.png);
}

CSS躬行记(4)——浮动形状

  注意,url()函数中的图像不能直接从本地加载,必须从Web服务器中读取,如此引用的图像会有HTTP首部信息,用于判断是否跨域。

1)shape-image-threshold

  该属性可指定透明度阈值,修改形状边界,其取值范围是0~1,值越小透明度越高。对于透明度低于该值的部分,会包含在浮动形状中,而高于的则不包含。

  例如将该值设为1时,就表示没有浮动形状,即整张图像都不在浮动形状中,如下图所示。

div {
shape-image-threshold:;
}

CSS躬行记(4)——浮动形状

2)shape-margin

  该属性可指定浮动形状的外边距。在下面的示例中会添加10px的外边距,效果如下图所示。

div {
shape-margin: 10px;
}

CSS躬行记(4)——浮动形状

  注意,shape-margin属性的百分数的计算方式与普通的外边距相同,参照的也是包含块的宽度。假设div元素的包含块的宽度为220px,那么10%的外边距经过计算后得到的值为22px,效果如下图所示。

div {
shape-margin: 10%;
}

CSS躬行记(4)——浮动形状

上一篇:Ubuntu下搭建Kubernetes集群(4)--部署K8S Dashboard


下一篇:Jquery为下拉列表动态赋值与取值,取索引