各位观众老爷们，晚上好！今天咱来聊聊CSS里一个比较冷门，但用好了能让你的网页瞬间高大上的家伙——Exclusions，也就是wrap-flow属性。别看名字有点学术，其实它就是用来实现文本环绕任意浮动形状的，让你的文字不再死板地挤在方框里，而是像小溪一样绕着石头流淌。 一、啥是Exclusions？为啥要用它？ 简单来说，Exclusions就是告诉浏览器，某个浮动元素（或者其他元素）周围的区域，文本应该怎么绕着走。传统的float属性只能让文本绕着矩形浮动元素走，如果要绕着圆形、多边形甚至更复杂的形状，那就抓瞎了。Exclusions就是来解决这个问题的。 想象一下，你有一个头像，你想让文字围绕着头像形成一个自然的圆形环绕效果，用float是搞不定的。这时候，Exclusions就能大显身手了。 二、wrap-flow属性：Exclusions的核心 wrap-flow是CSS Exclusions Module Level 1规范中的一个属性，它定义了文本如何绕排浮动区域。这个属性的值决定了文本环绕的行为。 wrap-flow属性有以下几个常用的取值： auto: 这是默认值，表 …
CSS `CSS Exclusions` (重新审视，或新提案)：内容环绕任意形状元素
各位好，今天咱们来聊点好玩的，关于CSS Exclusions，或者说是它的复活之路，以及更广阔的“内容环绕任意形状元素”的可能性。这玩意儿，说白了，就是让文字像水一样，绕着石头走，只不过这里的“石头”可以是任意形状。 缘起：那些年，我们追过的CSS Exclusions 话说CSS Exclusions这概念，早在CSS3的草案里就出现过，目标很明确：让Web排版更灵活，让文字不再傻乎乎地只知道矩形排布。想象一下，你放一张心形的图片，文字就能优雅地绕着心形边缘流动，而不是粗暴地贴着矩形边框。想想都觉得浪漫！ 当时的语法大概是这样： .element { exclusion-shape: circle(50%); /* 绕着圆形区域排除 */ exclusion-area: content-box; /* 排除区域的大小，content-box表示内容区域 */ } 但理想很丰满，现实很骨感。这玩意儿最终没能成为W3C推荐标准，原因嘛，复杂得很，包括实现难度、浏览器兼容性、以及与其他CSS属性的冲突等等。总之，它就这么悄悄地淡出了人们的视线。 现状：曲线救国，绕道而行 虽然CSS Ex …