浅析CSS shapes布局及了解shape-outside属性及其应用

一、CSS shapes 布局

　　shapes 表示形状，CSS Shapes 布局可以实现不规则形状的文字环绕效果，需要和浮动配合使用。

　　CSS shapes 布局相关属性并不多，主要是这 3 个属性：shape-outside、shape-margin、shape-image-threshold

1、shape-outside 是不规则形状环绕布局的核心，支持的属性值有4大类，其中可以通过函数生成各种类型的不规则形状

2、shape-margin，就是文字环绕图形时候，距离边界的位置，这个属性很有用。因为在Shape布局中，文字环绕有时候是无视margin属性的，想要撑开间距，多半还得用shape-margin属性

3、了解 shape-image-threshold

　　threshold这个单词是“阈(yu)值”的意思，shape-image-threshold指图像环绕时候的半透明阈值，默认是0.0，也就是图像透明度为0的区域边界才能环绕。同理，如果值是0.5表示透明度小于0.5的区域都可以文字环绕。

　　这个属性也非常实用，也很好理解，例如，我们写一个实色到透明的倾斜线性渐变，则从0~1的透明度都覆盖到了，此时，不同的shape-image-threshold值则会产生不同的布局变化。

　　详情可看这篇文章：《写给自己看的CSS shapes布局教程》https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes/

二、shape-outside 属性及其应用

　　shape-outside 是 CSS Shapes Module Level 1（CSS 形状模块标准1）规范中提出的一个属性，用于设置浮动元素周围内联元素对其包裹的形状，也就是说借助shape-outside属性可以使得浮动元素周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果。

　　比如像下面这样各种不规则形状布局，实现复杂的文字排版。

　　详见这篇文章：https://note.xiexuefeng.cc/post/css-shape-outside/

　　再比如很多科普书上这样的图文布局等，还是很常见的，详见：《CSS Shapes：打破矩形设计的限制》https://www.w3cplus.com/css3/css-shapes-breaking-rectangular-design.html

　　个人总结：

　　这个属性很冷门，用的很少，但是根据 can i use 查看，兼容性还是不错的，特别是在应用到这样复杂的的“图文混排”方面效果挺好的，如果不是使用这个属性，确实还不大好实现。所以可以了解一下，知道最优解决方案，在以后遇到这种应用场景时，再来进行深入研究。

　　还有一个应用就是看这篇文章：《CSS 奇技淫巧 | 巧妙实现文本"不定行数"截断》https://mp.weixin.qq.com/s/goxVoSygA8W2BbqKnPXB3Q