0Pricing
CSS Academy · 课时

使用 shape-outside 实现文本环绕

对浮动元素使用 shape-outside，让文本环绕自定义形状。

使用 shape-outside 实现文本环绕 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

CSS 形状模块

CSS 形状模块允许文本环绕非矩形形状。主要属性是 shape-outside，它定义了文本环绕的形状。

shape-outside 的要求

shape-outside 仅适用于浮动元素。元素必须向左或向右浮动，旁边的文本才能环绕定义的形状。

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

文本会环绕相对于浮动元素定义的圆形路径：

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

文本会环绕椭圆形路径：

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

文本会环绕多边形路径，从而实现复杂的编辑式布局：

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

带图像的 shape-outside

传入 URL，将图像的 alpha 通道用作形状边界。文本会环绕图像中不透明的区域：

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

shape-margin 会在 shape-outside 路径与环绕文本之间添加间距：

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

使用图像作为 shape-outside 时，shape-image-threshold 会设置定义形状边界的 Alpha 透明度阈值（0 到 1）。

设计应用

CSS Shapes 可以实现杂志风格的编辑排版、带有不规则图像环绕的提要引文，以及具有不规则文本流的首字下沉区域——这些效果过去只能通过印刷设计或 SVG 实现。

浏览器支持

所有现代浏览器都支持带基本形状（circle、ellipse、polygon、inset）的 shape-outside。带图像 URL 的 shape-outside 兼容范围更广，但具体支持情况可能有所不同。请务必测试。

实践示例：首字下沉

一个三角形的首字下沉区域，文本会环绕大型装饰字母：

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

快速检查

要让元素上的 shape-outside 生效，需要满足什么条件？

总结

shape-outside 可以让文本环绕浮动元素上定义的非矩形形状流动。形状可以是圆形、椭圆形、多边形，也可以由图像的 Alpha 通道定义。请使用 shape-margin 增加留白。结合 clip-path，可以让元素的视觉形状与所定义的形状保持一致。

常见问题解答

「使用 shape-outside 实现文本环绕」课时是免费的吗？

是的 — 「使用 shape-outside 实现文本环绕」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「使用 shape-outside 实现文本环绕」这节课中我会学到什么？

对浮动元素使用 shape-outside，让文本环绕自定义形状。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 shape-outside 实现文本环绕」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 polygon() 与 circle() 的 clip-path
  2. 使用 shape-outside 实现文本环绕
  3. 为 clip-path 形状添加动画
  4. CSS 遮罩与 Clip-path 对比
← 返回 CSS Academy