探讨 CSS shape-outside 对文字环绕的几何计算方式 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS Shape-Outside：文字环绕的几何奥秘

大家好，今天我们深入探讨 CSS shape-outside 属性，以及它如何改变文字环绕的传统方式，并带来更灵活、更富创意的布局。传统上，文字环绕只能围绕元素的矩形边界进行，而 shape-outside 允许我们指定任意形状，文字将根据这个形状进行环绕。本次讲座将围绕 shape-outside 的几何计算方式展开，包含其基本用法、支持的形状类型、影响环绕行为的关键属性，以及一些高级技巧和潜在问题。

1. `shape-outside` 的基本概念与语法

shape-outside 属性定义了一个 CSS 盒模型中元素内容区域的浮动区域。简单来说，就是告诉浏览器，文字应该围绕着什么形状进行环绕，而不是仅仅围绕元素的矩形边框。

语法:

shape-outside: <shape-value> | <url> | none | inherit | initial | unset;

<shape-value>: 定义具体的形状，例如 circle(), ellipse(), polygon(), inset(), path().
<url>: 引用一个 SVG 图像，形状将从 SVG 图像的 alpha 通道中提取。
none: 禁用形状，恢复默认的矩形环绕。
inherit: 继承父元素的 shape-outside 值。
initial: 将 shape-outside 设置为其初始值（none）。
unset: 如果元素继承了 shape-outside，则设置为 inherit；否则设置为 initial。

关键点:

shape-outside 只有在元素浮动 (float: left 或 float: right) 时才生效。
shape-outside 定义的形状会影响周围的行内内容（inline content）的布局。
如果 shape-outside 的形状超出了元素的边框盒，则文字会环绕整个形状。
shape-margin 属性可以用来增加形状和文字之间的间距。

2. `shape-outside` 支持的形状类型及其几何计算

shape-outside 提供了多种内置形状函数，每种形状都有不同的参数和几何定义，下面我们将详细介绍这些形状的几何计算方式。

2.1 `circle()`

circle() 函数创建一个圆形。

语法:

shape-outside: circle( <radius> [ at <position> ]? );

<radius>: 圆的半径。可以是长度值 (如 100px) 或百分比 (相对于元素宽度或高度，取决于 shape-box)。auto 表示半径为元素宽度和高度的最小值除以 2。
<position>: 圆心的位置。可以是 length 或 percentage 值，或者使用关键字 top, bottom, left, right, center。如果省略，则默认为 center center。

几何计算:

圆的几何定义非常简单。给定圆心坐标 (x, y) 和半径 r，圆上的任意点 (x’, y’) 满足以下公式：

(x' - x)^2 + (y' - y)^2 = r^2

浏览器在计算文字环绕时，会将圆的形状转换为一系列的点，然后根据这些点来确定文字的布局。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.circle {
  width: 150px;
  height: 150px;
  float: left;
  shape-outside: circle(75px);
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="circle"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着圆形进行环绕。通过调整 circle() 函数的参数，可以改变圆形的大小和位置，从而影响文字的环绕效果。我们还可以使用 shape-margin 属性来增加圆形和文字之间的间距。</p>
</div>

</body>
</html>

2.2 `ellipse()`

ellipse() 函数创建一个椭圆。

语法:

shape-outside: ellipse( <radius-x> <radius-y> [ at <position> ]? );

<radius-x>: 椭圆在 X 轴方向上的半径。
<radius-y>: 椭圆在 Y 轴方向上的半径。
<position>: 椭圆中心的位置。如果省略，则默认为 center center。

几何计算:

椭圆的几何定义如下。给定中心坐标 (x, y)，X 轴半径 rx，Y 轴半径 ry，椭圆上的任意点 (x’, y’) 满足以下公式：

((x' - x) / rx)^2 + ((y' - y) / ry)^2 = 1

与圆形类似，浏览器会将椭圆转换为一系列点，用于计算文字的环绕布局。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.ellipse {
  width: 200px;
  height: 100px;
  float: left;
  shape-outside: ellipse(100px 50px);
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="ellipse"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着椭圆进行环绕。椭圆的 x 轴和 y 轴半径可以分别设置，从而控制椭圆的形状。通过调整 ellipse() 函数的参数，可以改变椭圆的大小和位置，从而影响文字的环绕效果。我们还可以使用 shape-margin 属性来增加椭圆和文字之间的间距。</p>
</div>

</body>
</html>

2.3 `polygon()`

polygon() 函数创建一个多边形。

语法:

shape-outside: polygon( [<fill-rule>,]? <point>[, <point>]+ );

<fill-rule>: 可选参数，定义如何填充多边形。可以是 nonzero (默认值) 或 evenodd。 nonzero 意味着如果从任意点到无穷远处的射线穿过多边形的边界次数为非零，则该点在多边形内部。 evenodd 意味着如果射线穿过边界的次数为奇数，则该点在多边形内部。
<point>: 多边形顶点的坐标，格式为 <length> <length> 或 <percentage> <percentage>。

几何计算:

多边形的几何定义由其顶点坐标决定。浏览器会连接这些顶点，形成多边形的边。对于给定的点，判断该点是否在多边形内部，需要根据 fill-rule 进行计算。

nonzero规则: 从该点引一条射线到无穷远，计算射线穿过多边形边界的次数。如果边界是顺时针方向穿过射线，计数器加 1；如果是逆时针方向穿过射线，计数器减 1。如果最终计数器非零，则该点在多边形内部。
evenodd规则: 从该点引一条射线到无穷远，计算射线穿过多边形边界的次数。如果穿过次数为奇数，则该点在多边形内部。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.polygon {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="polygon"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着三角形进行环绕。polygon() 函数允许我们创建任意形状的多边形。通过调整各个顶点的坐标，可以改变多边形的形状。我们还可以使用 shape-margin 属性来增加多边形和文字之间的间距。</p>
</div>

</body>
</html>

2.4 `inset()`

inset() 函数创建一个矩形，但可以指定矩形四个边的内边距。

语法:

shape-outside: inset( <length-percentage>{1,4} [ round <border-radius> ]? );

<length-percentage>: 指定矩形四个边的内边距。可以指定 1 到 4 个值，分别对应上、右、下、左四个边的内边距。如果只指定一个值，则四个边都使用该值。如果指定两个值，则第一个值对应上下边，第二个值对应左右边。如果指定三个值，则第一个值对应上边，第二个值对应左右边，第三个值对应下边。
round <border-radius>: 可选参数，指定矩形的圆角。

几何计算:

inset() 函数实际上是创建一个新的矩形，其边距相对于元素的边框盒向内收缩。浏览器根据指定的内边距计算出新矩形的顶点坐标，然后像处理普通矩形一样进行文字环绕。如果指定了圆角，则会在矩形的四个角上添加圆角。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.inset {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: inset(20px);
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="inset"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着内缩的矩形进行环绕。inset() 函数允许我们指定矩形四个边的内边距。通过调整内边距的值，可以改变矩形的形状和大小。我们还可以使用 shape-margin 属性来增加矩形和文字之间的间距。</p>
</div>

</body>
</html>

2.5 `path()`

path() 函数使用 SVG 路径数据定义形状。

语法:

shape-outside: path( [<fill-rule>,]? <string> );

<fill-rule>: 可选参数，与 polygon() 函数中的 fill-rule 含义相同。
<string>: SVG 路径数据字符串。

几何计算:

path() 函数的几何计算最为复杂，因为它依赖于 SVG 路径数据的解析。SVG 路径数据使用一系列命令来描述形状，例如：

M x y: 移动到 (x, y)
L x y: 绘制直线到 (x, y)
C x1 y1 x2 y2 x y: 绘制贝塞尔曲线到 (x, y)，使用控制点 (x1, y1) 和 (x2, y2)
Q x1 y1 x y: 绘制二次贝塞尔曲线到 (x, y)，使用控制点 (x1, y1)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 绘制椭圆弧到 (x, y)
Z: 闭合路径

浏览器需要解析这些命令，将路径数据转换为一系列的线段和曲线，然后根据这些线段和曲线来确定文字的环绕布局。贝塞尔曲线的计算涉及到复杂的数学公式，需要使用数值方法进行逼近。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.path {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: path('M 10 10 L 190 10 L 100 190 Z');
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="path"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着 SVG 路径定义的形状进行环绕。path() 函数允许我们使用 SVG 路径数据创建任意形状。通过调整路径数据，可以创建复杂的曲线和图形。我们还可以使用 shape-margin 属性来增加形状和文字之间的间距。</p>
</div>

</body>
</html>

2.6 `url()`

url() 函数引用一个 SVG 图像，形状将从 SVG 图像的 alpha 通道中提取。

语法:

shape-outside: url(image.svg);

几何计算:

浏览器会加载 SVG 图像，并分析其 alpha 通道。 alpha 通道表示图像的透明度。不透明的区域被视为形状的内部，透明的区域被视为形状的外部。浏览器会将 alpha 通道转换为一个轮廓，然后根据这个轮廓来确定文字的环绕布局。这个过程涉及到图像处理和轮廓提取算法，例如边缘检测和轮廓跟踪。

示例:

首先，创建一个名为 shape.svg 的 SVG 文件：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red"/>
</svg>

然后，在 HTML 中使用 url() 函数：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.image {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url(shape.svg);
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="image"></div>
  <p>这是一段用来测试文字环绕效果的文字。文字将会围绕着 SVG 图像定义的形状进行环绕。url() 函数允许我们使用 SVG 图像的 alpha 通道创建形状。通过调整 SVG 图像，可以创建复杂的形状。我们还可以使用 shape-margin 属性来增加形状和文字之间的间距。</p>
</div>

</body>
</html>

3. `shape-box` 属性的影响

shape-box 属性定义了 shape-outside 计算形状时所参考的盒模型。

语法:

shape-outside: circle(50%) margin-box;

支持的值包括：

margin-box: 使用 margin box 作为参考盒。
border-box: 使用 border box 作为参考盒。
padding-box: 使用 padding box 作为参考盒。
content-box: 使用 content box 作为参考盒。

shape-box 属性会影响形状的大小和位置。例如，如果 shape-box 设置为 margin-box，则形状的大小将包括元素的 margin。如果 shape-box 设置为 content-box，则形状的大小将只包括元素的 content。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 150px;
  height: 150px;
  float: left;
  margin: 20px;
  padding: 20px;
  border: 10px solid black;
  shape-outside: circle(50%) border-box; /* 尝试 margin-box, padding-box, content-box */
  shape-margin: 10px;
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
  <p>这段文字用于演示 shape-box 属性的影响。更改 shape-outside 中的 box 值，观察文字环绕的变化。</p>
</div>

</body>
</html>

4. `shape-margin` 属性

shape-margin 属性定义了形状和周围文字之间的间距。

语法:

shape-margin: <length> | <percentage> | auto;

<length>: 指定固定的间距值。
<percentage>: 指定相对于元素宽度的百分比间距。
auto: 浏览器自动计算间距。

shape-margin 属性可以用来调整文字的环绕效果，使其更加美观。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

.circle {
  width: 150px;
  height: 150px;
  float: left;
  shape-outside: circle(75px);
  shape-margin: 20px; /* 尝试不同的 margin 值 */
  background-color: lightblue; /* 用于可视化形状 */
}
</style>
</head>
<body>

<div class="container">
  <div class="circle"></div>
  <p>这段文字用于演示 shape-margin 属性的影响。调整 shape-margin 的值，观察文字与圆形之间的间距变化。</p>
</div>

</body>
</html>

5. 高级技巧与潜在问题

复杂的形状组合: 可以使用多个浮动元素和 shape-outside 属性来创建复杂的文字环绕效果。
动画: 可以对 shape-outside 属性进行动画处理，创建动态的文字环绕效果。但是，动画性能可能会受到影响，需要进行优化。
响应式设计: 可以使用媒体查询来调整 shape-outside 属性，以适应不同的屏幕尺寸。
性能问题: 复杂的形状和大量的文字可能会导致性能问题。尽量简化形状，减少文字量，或者使用硬件加速来提高性能。
浏览器兼容性: shape-outside 属性的兼容性较好，但仍然需要注意一些老旧浏览器的兼容性问题。可以使用 polyfill 来解决兼容性问题。

6. 一个表格，总结常用属性

属性	描述	可能的值
`shape-outside`	定义浮动元素的形状，文字将围绕该形状环绕。	`none`, `<shape-value>`, `<url>`, `inherit`, `initial`, `unset` 其中 `<shape-value>` 可以是 `circle()`, `ellipse()`, `polygon()`, `inset()`, `path()`
`shape-box`	指定 `shape-outside` 属性计算形状时使用的盒模型。	`margin-box`, `border-box`, `padding-box`, `content-box`
`shape-margin`	定义形状和周围文字之间的间距。	`<length>`, `<percentage>`, `auto`
`float`	指定元素是否应该浮动。`shape-outside` 只有在元素浮动时才生效。	`left`, `right`, `none`, `inherit`, `initial`, `unset`

7. 几何计算是核心，灵活运用是关键

shape-outside 的核心在于其几何计算方式，理解各种形状的几何定义，以及 shape-box 和 shape-margin 属性的影响，才能更好地控制文字的环绕效果。通过灵活运用这些属性，我们可以创造出更富创意和吸引力的布局。希望本次讲座能帮助大家更深入地理解 shape-outside 属性，并在实际项目中灵活应用。

CSS Shape-Outside：文字环绕的几何奥秘

1. shape-outside 的基本概念与语法

2. shape-outside 支持的形状类型及其几何计算

2.1 circle()

2.2 ellipse()

2.3 polygon()

2.4 inset()

2.5 path()

2.6 url()

3. shape-box 属性的影响

4. shape-margin 属性

5. 高级技巧与潜在问题

6. 一个表格，总结常用属性

7. 几何计算是核心，灵活运用是关键

发表回复 取消回复

1. `shape-outside` 的基本概念与语法

2. `shape-outside` 支持的形状类型及其几何计算

2.1 `circle()`

2.2 `ellipse()`

2.3 `polygon()`

2.4 `inset()`

2.5 `path()`

2.6 `url()`

3. `shape-box` 属性的影响

4. `shape-margin` 属性

发表回复取消回复