发布于 由admin

CSS排除（Exclusions）：`wrap-flow`属性实现非矩形文本环绕

CSS Exclusions：wrap-flow属性实现非矩形文本环绕

大家好，今天我们来深入探讨CSS Exclusions，特别是其中的wrap-flow属性，以及如何利用它来实现非矩形文本环绕效果。这种技术允许我们将文本不仅仅局限于围绕矩形元素，而是可以根据自定义的形状或路径进行环绕，从而创造更具视觉吸引力和设计感的网页布局。

1. 什么是CSS Exclusions？

CSS Exclusions（排除）是CSS3规范的一部分，它提供了一种机制，允许内容围绕特定的区域流动，而这些区域不必是简单的矩形。Exclusions通过定义一个“排除区域”，告诉浏览器文本应该如何环绕该区域。这为网页设计师提供了更灵活的布局控制，可以创建更复杂的文本排版效果。

2. wrap-flow属性：核心控制

wrap-flow是CSS Exclusions中的一个关键属性，它控制了文本如何围绕排除区域流动。它定义了排除区域与周围文本之间的交互方式。wrap-flow属性有以下几种取值：

  • auto: 默认值。浏览器决定如何环绕排除区域。通常表现为绕着整个排除区域流动。
  • wrap: 文本环绕整个排除区域的外部边缘。与auto类似，但更明确地指示浏览器进行环绕。
  • clear: 文本不环绕排除区域。排除区域就像一个clear: both的元素一样，强制文本在其下方开始。
  • left: 文本仅环绕排除区域的左侧。
  • right: 文本仅环绕排除区域的右侧。
  • both: 文本不环绕排除区域的任何一侧，效果类似于clear。
  • start: 文本从排除区域的起始位置开始环绕（基于书写模式）。
  • end: 文本从排除区域的结束位置开始环绕（基于书写模式）。
  • maximum: 文本环绕排除区域的最大可用空间。
  • minimum: 文本环绕排除区域的最小可用空间。

3. shape-outside属性：定义排除区域的形状

wrap-flow属性定义了文本如何环绕，而shape-outside属性则定义了排除区域本身的形状。shape-outside属性允许我们使用各种CSS形状函数来创建复杂的非矩形排除区域。以下是一些常用的shape-outside值：

  • circle(): 创建一个圆形排除区域。
    • circle(radius at center-x center-y)
  • ellipse(): 创建一个椭圆形排除区域。
    • ellipse(radius-x radius-y at center-x center-y)
  • inset(): 创建一个矩形或圆角矩形排除区域。
    • inset(top right bottom left round border-radius)
  • polygon(): 创建一个多边形排除区域。
    • polygon(point1, point2, point3, ...) 每个点都是一个坐标，例如 polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)
  • url(): 从图像中提取形状。图像的透明或半透明部分定义了排除区域。
  • none: 默认值。元素不形成排除区域。
  • content-box: 使用元素的内容框作为形状。
  • border-box: 使用元素的边框框作为形状。
  • padding-box: 使用元素的内边距框作为形状。
  • margin-box: 使用元素的 margin 框作为形状。

4. 结合wrap-flow和shape-outside的示例

现在，让我们通过一些具体的代码示例来演示如何结合wrap-flow和shape-outside来实现非矩形文本环绕效果。

示例 1：圆形环绕

<!DOCTYPE html>
<html>
<head>
<title>圆形环绕示例</title>
<style>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
}

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: lightblue;
  float: left;
  margin-right: 20px;
  shape-outside: circle(50%); /* 定义圆形排除区域 */
  wrap-flow: auto; /* 文本自动环绕 */
}
</style>
</head>
<body>
<div class="container">
  <div class="circle"></div>
  <p>
    这是一段用于演示圆形环绕效果的文本。我们将使用 CSS Exclusions 的 `wrap-flow` 和 `shape-outside` 属性来创建一个圆形排除区域，并让文本围绕该区域流动。这使得我们能够创建更具视觉吸引力的布局，摆脱传统的矩形文本环绕的限制。通过调整 `shape-outside` 的值，我们可以轻松地改变排除区域的形状，例如椭圆形、多边形等。而 `wrap-flow` 属性则控制了文本如何与排除区域交互，例如环绕整个区域、仅环绕左侧或右侧，或者完全不环绕。这为我们提供了极大的灵活性，可以根据具体的设计需求来定制文本排版效果。
  </p>
</div>
</body>
</html>

在这个例子中，我们创建了一个圆形元素，并使用shape-outside: circle(50%)将其定义为一个圆形排除区域。wrap-flow: auto 告诉浏览器让文本自动环绕该区域。

示例 2：椭圆形环绕

<!DOCTYPE html>
<html>
<head>
<title>椭圆形环绕示例</title>
<style>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
}

.ellipse {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  float: left;
  margin-right: 20px;
  shape-outside: ellipse(100px 50px at center); /* 定义椭圆形排除区域 */
  wrap-flow: auto; /* 文本自动环绕 */
}
</style>
</head>
<body>
<div class="container">
  <div class="ellipse"></div>
  <p>
    这是一段用于演示椭圆形环绕效果的文本。与圆形环绕类似，我们使用 `shape-outside: ellipse()` 来定义一个椭圆形排除区域。通过调整椭圆的半径，我们可以控制椭圆的形状。`wrap-flow: auto` 属性仍然负责让文本围绕该区域流动。椭圆形的环绕效果可以为网页布局增添一些柔和感。
  </p>
</div>
</body>
</html>

这个例子与圆形环绕类似，只是我们将shape-outside的值改为了ellipse(100px 50px at center)，创建了一个椭圆形的排除区域。

示例 3：多边形环绕

<!DOCTYPE html>
<html>
<head>
<title>多边形环绕示例</title>
<style>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
}

.polygon {
  width: 150px;
  height: 150px;
  background-color: lightcoral;
  float: left;
  margin-right: 20px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 定义多边形排除区域 */
  wrap-flow: auto; /* 文本自动环绕 */
}
</style>
</head>
<body>
<div class="container">
  <div class="polygon"></div>
  <p>
    这是一段用于演示多边形环绕效果的文本。`shape-outside: polygon()` 允许我们创建任意形状的排除区域。在这个例子中，我们创建了一个菱形排除区域。通过调整多边形的顶点坐标，我们可以创建各种各样的复杂形状。多边形环绕效果可以为网页布局带来更强的视觉冲击力。
  </p>
</div>
</body>
</html>

在这个例子中，我们使用shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)创建了一个菱形排除区域。你可以修改多边形的顶点坐标来创建不同的多边形形状。

示例 4：使用inset()创建圆角矩形环绕

<!DOCTYPE html>
<html>
<head>
<title>圆角矩形环绕示例</title>
<style>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
}

.rounded-rect {
  width: 150px;
  height: 100px;
  background-color: lightsalmon;
  float: left;
  margin-right: 20px;
  shape-outside: inset(10px round 20px); /* 定义圆角矩形排除区域 */
  wrap-flow: auto; /* 文本自动环绕 */
}
</style>
</head>
<body>
<div class="container">
  <div class="rounded-rect"></div>
  <p>
    这是一段用于演示圆角矩形环绕效果的文本。`shape-outside: inset()` 允许我们创建具有圆角的矩形排除区域。通过调整 `round` 参数，我们可以控制圆角的程度。圆角矩形环绕效果可以为网页布局增添一些柔和感。
  </p>
</div>
</body>
</html>

在这个例子中，我们使用shape-outside: inset(10px round 20px)创建了一个圆角矩形排除区域。inset()函数的参数分别代表上、右、下、左四个方向的内边距，round参数则控制圆角的半径。

示例 5：使用图像作为排除区域


<!DOCTYPE html>
<html>
<head>
<title>图像环绕示例</title>
<style>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 20px;
}

.image {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 20px;
  shape-outside: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACYCAYAAACbL4FHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAARASURBVHhe7d3BccQgEEDhC8o/6q0dLCi35lQJcE8W45Y6/e3v3k7/2Qf+z//Z//Y//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z//Z//7P/9n//z

更多IT精英技术系列讲座，到智猿学院

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注