CSS `Exclusions` (`wrap-flow`)：实现文本环绕任意浮动形状

各位观众老爷们，晚上好！今天咱来聊聊CSS里一个比较冷门，但用好了能让你的网页瞬间高大上的家伙——Exclusions，也就是wrap-flow属性。别看名字有点学术，其实它就是用来实现文本环绕任意浮动形状的，让你的文字不再死板地挤在方框里，而是像小溪一样绕着石头流淌。

一、啥是Exclusions？为啥要用它？

简单来说，Exclusions就是告诉浏览器，某个浮动元素（或者其他元素）周围的区域，文本应该怎么绕着走。传统的float属性只能让文本绕着矩形浮动元素走，如果要绕着圆形、多边形甚至更复杂的形状，那就抓瞎了。Exclusions就是来解决这个问题的。

想象一下，你有一个头像，你想让文字围绕着头像形成一个自然的圆形环绕效果，用float是搞不定的。这时候，Exclusions就能大显身手了。

二、wrap-flow属性：Exclusions的核心

wrap-flow是CSS Exclusions Module Level 1规范中的一个属性，它定义了文本如何绕排浮动区域。这个属性的值决定了文本环绕的行为。

wrap-flow属性有以下几个常用的取值：

auto: 这是默认值，表示文本的环绕行为由其他属性（比如float）决定。如果没有float，文本会忽略该元素。
start: 文本只在浮动元素的上方绕排。
end: 文本只在浮动元素的下方绕排。
both: 文本在浮动元素的上方和下方都绕排。
clear: 文本不会绕排浮动元素，而是会像设置了clear: both一样，另起一行显示。
maximum: 这个值比较特殊，它需要结合wrap-margin属性一起使用。wrap-margin定义了环绕区域的边缘距离浮动元素的距离。文本会在距离浮动元素wrap-margin的范围内绕排。
minimum: 与maximum相反，文本只会在wrap-margin定义的区域内部环绕。这个用的比较少，了解即可。

三、shape-outside属性：定义绕排的形状

光告诉浏览器文本要绕排还不够，还得告诉它绕着什么形状排。shape-outside属性就是用来定义绕排形状的。这个属性可以接受以下几种值：

none: 默认值，表示不定义任何绕排形状，文本会忽略该元素。
<shape-box>: 使用盒模型相关的形状，比如margin-box、border-box、padding-box、content-box。这些值分别对应元素的外边距盒子、边框盒子、内边距盒子和内容盒子。
<basic-shape>: 使用CSS Shapes规范中定义的形状函数，比如circle()、ellipse()、inset()、polygon()。
url(): 使用图片作为绕排形状。图片的透明区域会被视为绕排区域。
image(): 同url()。

四、实战演练：代码说话

光说不练假把式，咱们来几个例子，看看Exclusions到底怎么用。

例1：圆形头像环绕文字

HTML代码：

<div class="container">
  <img class="avatar" src="avatar.jpg" alt="头像">
  <p>这是一段很长的文字，用来测试文本环绕效果。我们可以看到，文字会围绕着头像形成一个自然的圆形环绕效果。这比使用传统的float属性要灵活得多。这是一段很长的文字，用来测试文本环绕效果。我们可以看到，文字会围绕着头像形成一个自然的圆形环绕效果。这比使用传统的float属性要灵活得多。</p>
</div>

CSS代码：

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.avatar {
  float: left; /* 关键：需要float才能触发wrap-flow */
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 20px;
  shape-outside: circle(50%); /* 定义绕排形状为圆形 */
  wrap-flow: both; /* 文字在头像上下都绕排 */
}

p {
  line-height: 1.5;
}

在这个例子中，我们首先将头像float: left;，这是触发wrap-flow的关键。然后，使用shape-outside: circle(50%);定义绕排形状为圆形，半径为50%。最后，使用wrap-flow: both;让文字在头像的上下都绕排。

例2：多边形环绕文字

HTML代码和上面的例子一样，只需要修改CSS代码：

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.avatar {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 定义绕排形状为多边形 */
  wrap-flow: both;
}

p {
  line-height: 1.5;
}

这里，我们使用shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);定义绕排形状为一个菱形。你可以根据需要修改多边形的顶点坐标，创建不同的形状。

例3：图片环绕文字

HTML代码和上面的例子一样，这次我们使用一张带有透明区域的图片作为头像：

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.avatar {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  shape-outside: url(shape.png); /* 定义绕排形状为图片 */
  wrap-flow: both;
}

p {
  line-height: 1.5;
}

在这个例子中，shape.png是一张带有透明区域的图片。浏览器会自动识别图片的透明区域，并让文字绕着图片的非透明区域环绕。

例4：wrap-margin和wrap-flow: maximum的使用

HTML代码：

<div class="container">
  <div class="floated">浮动元素</div>
  <p>
    这段文字将会环绕浮动元素。这段文字将会环绕浮动元素。这段文字将会环绕浮动元素。这段文字将会环绕浮动元素。这段文字将会环绕浮动元素。这段文字将会环绕浮动元素。
  </p>
</div>

CSS代码：

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.floated {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-right: 20px;
  shape-outside: rectangle(); /* 使用矩形作为形状，也可以是其他形状 */
  wrap-flow: maximum;
  wrap-margin: 30px; /* 定义环绕区域的边缘距离浮动元素30px */
}

p {
  line-height: 1.5;
}

在这个例子中，wrap-margin: 30px;定义了环绕区域的边缘距离浮动元素30px。wrap-flow: maximum;表示文本会在距离浮动元素30px的范围内绕排。

五、兼容性问题：IE的痛

虽然Exclusions很强大，但是兼容性是绕不开的坎。目前，wrap-flow和shape-outside属性在主流浏览器（Chrome、Firefox、Safari）中支持良好，但是在IE浏览器中，那是相当的惨淡。

所以，在使用Exclusions的时候，一定要考虑兼容性问题。可以考虑以下几种方案：

渐进增强: 对于支持Exclusions的浏览器，使用Exclusions实现高级的环绕效果；对于不支持的浏览器，使用传统的float属性提供基本的环绕效果。
polyfill: 寻找现有的polyfill库，尝试模拟Exclusions的行为。但是，polyfill的实现可能会比较复杂，性能也可能不太理想。
放弃: 如果项目的目标用户主要是IE用户，或者对环绕效果的要求不高，可以考虑放弃使用Exclusions，使用其他方式实现类似的效果。

六、总结：Exclusions的优缺点

优点：

灵活: 可以实现各种复杂的环绕效果，不再局限于矩形。
强大: 可以与shape-outside属性结合，定义各种形状的绕排区域。
语义化: 使用Exclusions可以更清晰地表达网页的布局意图。

缺点：

兼容性: 在IE浏览器中兼容性较差。
学习成本: 需要理解wrap-flow和shape-outside属性的各种取值，有一定的学习成本。
性能: 复杂的环绕效果可能会影响页面的渲染性能。

七、Exclusions的应用场景

Exclusions可以应用于以下场景：

杂志排版: 在杂志排版中，经常需要将文字绕着图片或其他元素排列，Exclusions可以轻松实现这种效果。
新闻网站: 在新闻网站中，可以使用Exclusions创建更吸引人的页面布局，提高用户的阅读体验。
博客文章: 在博客文章中，可以使用Exclusions让文字围绕着图片或视频排列，使文章更生动有趣。
创意网页设计: Exclusions可以用于各种创意网页设计，创造出独特的视觉效果。

八、高级技巧：shape-margin属性

shape-margin属性定义了形状的外边距。它在 shape-outside 属性定义的形状周围创建一个间隙。这个属性允许你控制文本与形状之间的距离，使得文本环绕效果更加美观。

示例：

.avatar {
  float: left;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
  shape-outside: circle(50%);
  shape-margin: 10px; /* 添加 10px 的外边距 */
  wrap-flow: both;
}

在这个例子中，shape-margin: 10px 会在圆形头像周围创建一个 10px 的间隙，使得文本不会紧贴着头像。

九、clip-path与shape-outside的配合使用

clip-path 用于裁剪元素的可视区域，而 shape-outside 用于定义文本环绕的形状。虽然它们功能不同，但可以结合使用，创造出更加复杂的视觉效果。

例如，你可以使用 clip-path 将元素裁剪成特定的形状，然后使用 shape-outside 让文本环绕该形状。

示例：

<div class="container">
  <img class="clipped-image" src="image.jpg" alt="Clipped Image">
  <p>这段文本将会环绕裁剪后的图片。这段文本将会环绕裁剪后的图片。这段文本将会环绕裁剪后的图片。这段文本将会环绕裁剪后的图片。</p>
</div>

.container {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.clipped-image {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 裁剪成菱形 */
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 定义环绕形状为菱形 */
  wrap-flow: both;
}

p {
  line-height: 1.5;
}

在这个例子中，clip-path 将图片裁剪成菱形，shape-outside 也定义了一个菱形，使得文本环绕裁剪后的图片。

十、object-fit与shape-outside的使用

当 shape-outside 使用 url() 或 image() 来定义形状时，图片的尺寸和比例可能会影响环绕效果。object-fit 属性可以用来控制图片如何适应其容器，从而影响 shape-outside 的效果。

例如，你可以使用 object-fit: cover 来确保图片填充整个容器，并裁剪超出部分，从而得到更可控的环绕效果。

十一、总结的总结：Exclusions的未来

总的来说，Exclusions是一个非常有用的CSS属性，可以用来实现各种复杂的文本环绕效果。虽然目前兼容性还不太理想，但是随着浏览器的不断发展，相信Exclusions的兼容性会越来越好。

希望今天的讲座能让你对Exclusions有一个更深入的了解。如果你想让你的网页更加美观、更加吸引人，不妨尝试一下Exclusions吧！

讲座到此结束，感谢各位的观看！

发表回复 取消回复

发表回复取消回复