CSS形状（Shapes）：利用`shape-outside`实现文字环绕非矩形物体的排版

CSS形状（Shapes）：利用shape-outside实现文字环绕非矩形物体的排版

大家好，今天我们来深入探讨CSS中的shape-outside属性，以及它如何帮助我们实现文字环绕非矩形物体的排版效果。在传统的网页布局中，文字通常只能环绕矩形盒子，这限制了我们创造更具创意和视觉吸引力的设计。shape-outside属性的出现，打破了这种限制，让我们可以定义文字环绕的形状，从而实现更灵活的排版。

1. shape-outside 属性概述

shape-outside属性定义了一个CSS盒子可以被文字环绕的形状。它允许我们指定一个非矩形的区域，文字会根据这个形状进行环绕，而不是简单的矩形边界。这个属性只影响浮动元素，并且需要与float属性一起使用才能生效。

语法：

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

其中：

• <shape-value>: 指定形状的值，可以是circle(), ellipse(), polygon(), inset()，或 url() 函数指向的图像。
• <url>: 指向一个图像的URL，图像的透明区域将作为形状。
• <basic-shape>: CSS提供的基础形状函数，用于定义形状。
• none: 默认值，表示不使用形状，文字环绕元素的矩形盒子。
• inherit: 从父元素继承shape-outside属性的值。
• initial: 将属性设置为其初始值（none）。
• unset: 如果属性是继承的，则行为类似于inherit，否则行为类似于initial。

适用元素：

shape-outside 属性只适用于浮动元素（即float属性值为left或right的元素）。

2. shape-outside 的取值类型详解

接下来我们详细了解一下shape-outside可以使用的各种取值类型，以及它们的使用方法。

2.1 none

这是shape-outside属性的默认值，表示不使用任何形状。文字会环绕元素的矩形盒子。

<div class="container">
  <div class="shape none">这是一个没有形状的浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素没有定义shape-outside，文字会环绕其矩形边界。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.none {
  shape-outside: none; /* 默认值，可以省略 */
}

2.2 基础形状函数

CSS提供了几个基础形状函数，可以直接在shape-outside中使用，分别是：

• circle()
• ellipse()
• polygon()
• inset()

2.2.1 circle()

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

语法：

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

• <shape-radius>: 圆的半径。可以是绝对长度值 (如 100px)，百分比值 (相对于元素的引用盒子)，或关键字 closest-side 或 farthest-side。 如果省略，则默认为 closest-side。
• <position>: 圆心的位置。可以使用 at 关键字指定，例如 at 50% 50% 表示圆心位于元素的中心。如果省略，则默认为 at center。

示例：

<div class="container">
  <div class="shape circle">这是一个圆形浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为圆形，文字会环绕圆形边界。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.circle {
  shape-outside: circle(50%);
}

2.2.2 ellipse()

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

语法：

ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )

• <shape-radius>{2}: 椭圆的两个半径，分别是横向半径和纵向半径。可以是绝对长度值 (如 100px)，百分比值 (相对于元素的引用盒子)，或关键字 closest-side, farthest-side, closest-corner 或 farthest-corner。 如果省略，则默认为 closest-side closest-side。
• <position>: 椭圆的中心位置。可以使用 at 关键字指定。如果省略，则默认为 at center。

示例：

<div class="container">
  <div class="shape ellipse">这是一个椭圆形浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为椭圆形，文字会环绕椭圆形边界。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 100px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.ellipse {
  shape-outside: ellipse(75px 50px);
}

2.2.3 polygon()

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

语法：

polygon( [ <fill-rule>, ]? <shape-point># )

• <fill-rule>: 可选参数，指定多边形的填充规则。可以是 nonzero 或 evenodd。默认为 nonzero。
• <shape-point>: 多边形的顶点坐标，由一对数值组成，表示相对于元素左上角的横坐标和纵坐标。例如 0px 0px 表示左上角， 100px 100px 表示距离左上角横向100px，纵向100px的点。

示例：

<div class="container">
  <div class="shape polygon">这是一个多边形浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为多边形，文字会环绕多边形边界。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.polygon {
  shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 75%, 75% 100%, 0 100%);
}

2.2.4 inset()

inset()函数用于创建一个内嵌的矩形。

语法：

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

• <length-percentage>{1,4}: 定义矩形四个边的内边距。 可以使用一个到四个值，与 margin 和 padding 属性类似。
• round <border-radius>: 可选参数，用于定义矩形的圆角。

示例：

<div class="container">
  <div class="shape inset">这是一个内嵌矩形浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为内嵌矩形，文字会环绕内嵌矩形边界。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.inset {
  shape-outside: inset(20px);
}

2.3 url()

url()函数用于指定一个图像作为形状。图像的透明区域将作为文字环绕的形状。

语法：

shape-outside: url(image.png);

示例：

假设我们有一个名为star.png的图像，其中包含一个透明背景的星形图案。

<div class="container">
  <div class="shape image">这是一个使用图像形状的浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为图像，文字会环绕图像的透明区域。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.image {
  shape-outside: url(star.png);
  shape-margin: 5px; /* 为了让文字和形状之间留出一些空隙 */
}

需要注意的是，url()函数指向的图像需要支持透明度，例如PNG或GIF格式。

3. shape-margin 属性

shape-margin属性用于在shape-outside定义的形状周围创建一个边距。这可以防止文字紧贴形状，提高可读性。

语法：

shape-margin: <length> | inherit | initial | unset;

• <length>: 边距的大小。可以是任何有效的CSS长度值。

示例：

<div class="container">
  <div class="shape circle">这是一个圆形浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为圆形，并且设置了shape-margin，文字和圆形之间有间距。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.circle {
  shape-outside: circle(50%);
  shape-margin: 10px;
}

4. shape-image-threshold 属性

shape-image-threshold属性用于指定图像透明度的阈值，只有透明度低于该阈值的像素才会被视为形状的一部分。这个属性只有在使用url()函数时才有效。

语法：

shape-image-threshold: <number> | inherit | initial | unset;

• <number>: 一个介于0.0和1.0之间的数值。0.0表示完全透明，1.0表示完全不透明。

示例：

如果图像中存在一些半透明的区域，可以通过调整shape-image-threshold来控制哪些区域被视为形状的一部分。

<div class="container">
  <div class="shape image">这是一个使用图像形状的浮动元素。</div>
  <p>这是一段环绕文字，由于浮动元素定义了shape-outside为图像，并且设置了shape-image-threshold，只有透明度低于阈值的区域才会被视为形状。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  float: left;
  margin-right: 10px;
}

.image {
  shape-outside: url(star.png);
  shape-image-threshold: 0.5; /* 设置透明度阈值为0.5 */
  shape-margin: 5px;
}

5. clip-path 属性 vs shape-outside 属性

clip-path 和 shape-outside 都是用来定义形状的 CSS 属性，但它们的作用和使用方式有所不同。

特性	clip-path	shape-outside
作用	裁剪元素的内容，使其只显示特定形状内的部分。	定义一个浮动元素周围的环绕区域，影响文字的流动方式。
影响	元素的视觉呈现。	元素的布局，特别是文字的环绕方式。
适用元素	所有元素。	只适用于浮动元素。
形状定义	可以使用基本形状、SVG路径或图像。	可以使用基本形状或图像的透明区域。
对文字的影响	不影响文字的环绕方式。	影响文字的环绕方式。

总结：

• 如果想要裁剪元素的视觉呈现，使用 clip-path。
• 如果想要控制文字环绕浮动元素的形状，使用 shape-outside。

6. 浏览器兼容性

shape-outside 的浏览器兼容性相对较好，主流浏览器都支持该属性。但需要注意的是，一些旧版本的浏览器可能不支持该属性，或者只支持部分取值。

浏览器	支持情况
Chrome	完全支持。
Firefox	完全支持。
Safari	完全支持。
Edge	完全支持。
Opera	完全支持。
Internet Explorer	不支持。

为了确保在所有浏览器中都能获得最佳的兼容性，可以使用一些polyfill或渐进增强的方法。例如，可以先使用简单的矩形布局，然后在支持shape-outside的浏览器中应用更复杂的形状。

7. 应用实例

下面我们通过几个具体的例子，来展示shape-outside的实际应用。

7.1 杂志风格排版

可以使用shape-outside创建一个杂志风格的排版，其中文字环绕图片或图形。

<div class="container">
  <img class="shape" src="image.jpg" alt="示例图片">
  <p>这是一段文字，环绕着图片。可以使用shape-outside属性来定义文字环绕的形状，从而实现更具创意的排版效果。例如，可以创建一个圆形或多边形的形状，让文字围绕着图片或图形流动。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.shape {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 10px;
  shape-outside: circle(50%);
  shape-margin: 10px;
}

7.2 新闻网站布局

可以使用shape-outside创建一个新闻网站的布局，其中文章的标题或摘要环绕着新闻图片。

<div class="news-item">
  <img class="news-image" src="news.jpg" alt="新闻图片">
  <h2 class="news-title">新闻标题</h2>
  <p class="news-summary">新闻摘要，环绕着新闻图片。可以使用shape-outside属性来定义文字环绕的形状，从而实现更具吸引力的布局效果。</p>
</div>

.news-item {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.news-image {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 10px;
  shape-outside: polygon(0 0, 100% 0, 75% 100%, 0 100%);
  shape-margin: 5px;
}

7.3 创意网页设计

可以使用shape-outside创建更具创意的网页设计，例如，将文字环绕在一个自定义的SVG图形周围。

<div class="container">
  <div class="custom-shape"></div>
  <p>这是一段文字，环绕着自定义的SVG图形。可以使用shape-outside属性来定义文字环绕的形状，从而实现更具个性化的网页设计效果。</p>
</div>

.container {
  width: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.custom-shape {
  width: 200px;
  height: 200px;
  float: left;
  margin-right: 10px;
  background-color: #f0f0f0;
  /* 使用clip-path定义自定义形状 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* 使用get-shape方法获取clip-path定义的形状 */
  shape-outside: polygon(50% 0%, 0% 100%, 100% 100%); /* 这里直接使用polygon，实际应用中可能需要动态获取 */
  shape-margin: 10px;
}

8. 总结与应用建议

shape-outside是一个强大的CSS属性，可以让我们实现文字环绕非矩形物体的排版效果，为网页设计带来更多的可能性。

• 掌握shape-outside的各种取值类型，包括基础形状函数和url()函数。
• 使用shape-margin属性来控制文字与形状之间的间距，提高可读性。
• 注意浏览器兼容性，并使用polyfill或渐进增强的方法来确保在所有浏览器中都能获得最佳的体验。
• 灵活运用shape-outside，结合其他CSS属性，创造出更具创意和视觉吸引力的网页设计。

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