绘制浮动的效果_CSS躬行记（4）——浮动形状

逃离我推掉我的手 2023-01-06 11:47 126阅读 0赞

CSS规范新增了一个模块：CSS Shapes，shape-outside属性属于该模块，它能影响浮动元素周边内容流的形状（即浮动形状），可接收三类值：形状盒子、函数和图像。

## **一、形状盒子** ##

形状盒子（shape box）会指定形状的边界，既能单独使用，也能与另外两类值组合使用，可选的关键字如下所列，其中margin-box是shape-outside属性的默认值。

（1）margin-box：以外边距为界。

（2）border-box：以边框为界。

（3）padding-box：以内边距为界。

（4）content-box：以内容为界。

下图演示了四种形状盒子的效果，外边距、边框和内边距都设为了10px，代码中只列出了关键样式，并只举了其中的一种情况。

![e321eea94e96bcc2d44deac49cd29d74.png][]

## **二、函数** ##

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

**1）circle()**

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

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

![beefe00d3037dc763394a615d4180bc6.png][]

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

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

![b29f46237714fcec8af9738c94e0fd8d.png][]

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

![3c7d23378c6e4aa85c56db5ab9be021c.png][]

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

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

![c02e49f2dba429f2f2494eb35323893b.png][]

**2）ellipse()**

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

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

![1ebd15a2da666bf911345289482e66bd.png][]

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

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

![a04d27cf77a430f836742d0715727e01.png][]

**3）inset()**

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

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

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

![c74b77aa185433f13d4fbe166bb172bc.png][]

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

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

![caef88e706ca9c27d9dbd08e6f124226.png][]

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

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

![102cd305c9f1c1c2f47106daf2b2254b.png][]

**4）polygon()**

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

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

![500defe080d1b4fba1a7219a6280d4c7.png][]

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

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

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

![756b2ddc54bddbf3110ff0c070b832c2.png][]

## **三、图像** ##

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

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

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

![f99d77e3db5c2018642d065822e8b40c.png][]

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

**1）shape-image-threshold**

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

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

div {
         
      shape-image-threshold: 1;
    }

![2dc317de433c0afc83caf84821c4f34e.png][]

**2）shape-margin**

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

div {
         
      shape-margin: 10px;
    }

![1e9b3a529752684529f11ae843f83d5e.png][]

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

div {
         
      shape-margin: 10%;
    }

![574ea9959938170d93e3e7779587b0e8.png][]

[e321eea94e96bcc2d44deac49cd29d74.png]: /images/20221119/829d2d5d41cb42b0a3ca3064ab3271d5.png
[beefe00d3037dc763394a615d4180bc6.png]: https://img-blog.csdnimg.cn/img_convert/beefe00d3037dc763394a615d4180bc6.png
[b29f46237714fcec8af9738c94e0fd8d.png]: https://img-blog.csdnimg.cn/img_convert/b29f46237714fcec8af9738c94e0fd8d.png
[3c7d23378c6e4aa85c56db5ab9be021c.png]: https://img-blog.csdnimg.cn/img_convert/3c7d23378c6e4aa85c56db5ab9be021c.png
[c02e49f2dba429f2f2494eb35323893b.png]: https://img-blog.csdnimg.cn/img_convert/c02e49f2dba429f2f2494eb35323893b.png
[1ebd15a2da666bf911345289482e66bd.png]: https://img-blog.csdnimg.cn/img_convert/1ebd15a2da666bf911345289482e66bd.png
[a04d27cf77a430f836742d0715727e01.png]: https://img-blog.csdnimg.cn/img_convert/a04d27cf77a430f836742d0715727e01.png
[c74b77aa185433f13d4fbe166bb172bc.png]: https://img-blog.csdnimg.cn/img_convert/c74b77aa185433f13d4fbe166bb172bc.png
[caef88e706ca9c27d9dbd08e6f124226.png]: https://img-blog.csdnimg.cn/img_convert/caef88e706ca9c27d9dbd08e6f124226.png
[102cd305c9f1c1c2f47106daf2b2254b.png]: https://img-blog.csdnimg.cn/img_convert/102cd305c9f1c1c2f47106daf2b2254b.png
[500defe080d1b4fba1a7219a6280d4c7.png]: https://img-blog.csdnimg.cn/img_convert/500defe080d1b4fba1a7219a6280d4c7.png
[756b2ddc54bddbf3110ff0c070b832c2.png]: https://img-blog.csdnimg.cn/img_convert/756b2ddc54bddbf3110ff0c070b832c2.png
[f99d77e3db5c2018642d065822e8b40c.png]: https://img-blog.csdnimg.cn/img_convert/f99d77e3db5c2018642d065822e8b40c.png
[2dc317de433c0afc83caf84821c4f34e.png]: https://img-blog.csdnimg.cn/img_convert/2dc317de433c0afc83caf84821c4f34e.png
[1e9b3a529752684529f11ae843f83d5e.png]: https://img-blog.csdnimg.cn/img_convert/1e9b3a529752684529f11ae843f83d5e.png
[574ea9959938170d93e3e7779587b0e8.png]: https://img-blog.csdnimg.cn/img_convert/574ea9959938170d93e3e7779587b0e8.png