CSS3 形状与布局 - shape-outside 属性
核心知识点讲解
什么是 shape-outside 属性？
shape-outside 属性是 CSS3 中的一个强大属性，用于控制文本如何围绕元素流动。通过定义一个形状，文本会按照该形状的轮廓进行排列，而不是默认的矩形边界。这使得开发者可以创建更加复杂和有趣的文本环绕效果，如不规则形状的文本环绕、图片的文本环绕等。
语法
shape-outside: none | <shape-box> | <basic-shape> | <image>;取值
| 取值 | 描述 |
|---|---|
none |
默认值，文本按照元素的矩形边界流动。 |
<shape-box> |
使用元素的盒模型作为形状，包括： - margin-box：使用外边距框作为形状- border-box：使用边框框作为形状- padding-box：使用内边距框作为形状- content-box：使用内容框作为形状 |
<basic-shape> |
使用基本形状函数创建形状，包括： - inset()：创建矩形形状- circle()：创建圆形形状- ellipse()：创建椭圆形形状- polygon()：创建多边形形状 |
<image> |
使用图片的 alpha 通道作为形状，文本会围绕图片的非透明区域流动。 |
基本形状函数语法
1. inset()
inset(<top> <right> <bottom> <left> [round <top-radius> <right-radius> <bottom-radius> <left-radius>]);2. circle()
circle(<radius> at <position>);3. ellipse()
ellipse(<x-radius> <y-radius> at <position>);4. polygon()
polygon(<point-1> <point-2> ... <point-n>);作用
shape-outside 属性主要用于以下场景：
- 文本环绕：创建文本围绕不规则形状的效果，如圆形、多边形、图片等。
- 创意布局：通过不规则的文本环绕，创建独特的布局效果，增强设计的艺术性。
- 图片布局：让文本围绕图片的轮廓流动，而不是默认的矩形边界。
- 响应式设计：通过媒体查询，在不同屏幕尺寸下调整形状，优化布局效果。
注意事项
shape-outside属性只适用于浮动元素（float: left 或 float: right）。- 为了使
shape-outside属性生效，元素必须有明确的宽度和高度。 shape-outside属性可能会影响元素的性能，特别是当使用复杂的形状或图片时。- 对于某些浏览器，可能需要添加浏览器前缀以确保兼容性。
- 当使用
<image>作为取值时，图片必须是同源的，否则浏览器会忽略该属性。 - 为了获得最佳效果，通常需要配合
shape-margin属性一起使用，以控制文本与形状之间的距离。
实用案例分析
案例 1：基本形状的文本环绕
HTML 结构：
<div class="shape-container">
<div class="shape circle"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="shape-container">
<div class="shape polygon"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="shape-container">
<div class="shape ellipse"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>CSS 样式：
.shape-container {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
.shape {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background-color: #3498db;
shape-margin: 10px;
}
.shape.circle {
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.shape.polygon {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape.ellipse {
border-radius: 50%;
width: 200px;
height: 150px;
shape-outside: ellipse(100px 75px at 50% 50%);
}
.shape-container p {
margin: 0;
line-height: 1.6;
color: #333;
}效果说明：
- 展示了不同基本形状的文本环绕效果
- 包括圆形、多边形和椭圆形
- 每个形状都有
shape-margin属性，控制文本与形状之间的距离 - 文本会按照形状的轮廓进行排列
案例 2：图片的文本环绕效果
HTML 结构：
<div class="image-shape-container">
<img src="https://via.placeholder.com/200x200/3498db/ffffff?text=Image" alt="Image" class="shape-image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="image-shape-container">
<img src="https://via.placeholder.com/200x200/e74c3c/ffffff?text=Image" alt="Image" class="shape-image circle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>CSS 样式：
.image-shape-container {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
.shape-image {
float: left;
margin: 20px;
shape-margin: 10px;
}
.shape-image.circle {
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.image-shape-container p {
margin: 0;
line-height: 1.6;
color: #333;
}效果说明：
- 展示了图片的文本环绕效果
- 第一张图片使用默认的矩形边界，第二张图片使用圆形形状
- 文本会按照图片的轮廓进行排列
案例 3：复杂形状的文本环绕效果
HTML 结构：
<div class="complex-shape-container">
<div class="shape star"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>CSS 样式：
.complex-shape-container {
width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
.shape.star {
float: left;
margin: 20px;
width: 200px;
height: 200px;
background-color: #e74c3c;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
shape-outside: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
shape-margin: 10px;
}
.complex-shape-container p {
margin: 0;
line-height: 1.6;
color: #333;
}效果说明：
- 展示了复杂形状（星形）的文本环绕效果
- 文本会按照星形的轮廓进行排列
- 使用
clip-path属性创建星形形状，同时使用shape-outside属性定义文本环绕的形状
代码示例
完整示例：高级文本环绕效果
HTML 结构：
<div class="advanced-shape-container">
<h2>Advanced Text Wrapping</h2>
<div class="shape-section">
<h3>Circle Shape</h3>
<div class="shape-box">
<div class="shape circle"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="shape-section">
<h3>Polygon Shape</h3>
<div class="shape-box">
<div class="shape triangle"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="shape-section">
<h3>Image Shape</h3>
<div class="shape-box">
<img src="https://via.placeholder.com/200x200/2ecc71/ffffff?text=Image" alt="Image" class="shape-image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="shape-section">
<h3>Combined Shape</h3>
<div class="shape-box">
<div class="shape left-circle"></div>
<div class="shape right-circle"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>CSS 样式：
.advanced-shape-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.advanced-shape-container h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.shape-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
.shape-section h3 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
}
.shape-box {
position: relative;
}
.shape {
float: left;
margin: 20px;
width: 150px;
height: 150px;
shape-margin: 10px;
}
.shape.circle {
background-color: #3498db;
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.shape.triangle {
background-color: #e74c3c;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);
}
.shape-image {
float: left;
margin: 20px;
shape-margin: 10px;
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.shape.left-circle {
background-color: #2ecc71;
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.shape.right-circle {
float: right;
background-color: #9b59b6;
border-radius: 50%;
shape-outside: circle(50% at 50% 50%);
}
.shape-box p {
margin: 0;
line-height: 1.6;
color: #333;
}效果说明：
- 展示了一个高级文本环绕效果的集合
- 包括圆形形状、三角形形状、图片形状和组合形状的文本环绕效果
- 组合形状部分使用了两个圆形，一个在左侧，一个在右侧，文本会围绕两个圆形流动
- 每个部分都有标题，清晰地展示了不同形状的文本环绕效果
总结
shape-outside 属性是 CSS3 中的一个强大属性，用于控制文本如何围绕元素流动。通过定义一个形状，文本会按照该形状的轮廓进行排列，而不是默认的矩形边界。这使得开发者可以创建更加复杂和有趣的文本环绕效果，如不规则形状的文本环绕、图片的文本环绕等。
核心要点：
shape-outside属性只适用于浮动元素（float: left 或 float: right）。shape-outside属性可以使用基本形状函数（如inset()、circle()、ellipse()、polygon()）创建形状。shape-outside属性可以使用元素的盒模型作为形状。shape-outside属性可以使用图片的 alpha 通道作为形状。- 为了获得最佳效果，通常需要配合
shape-margin属性一起使用，以控制文本与形状之间的距离。 - 对于某些浏览器，可能需要添加浏览器前缀以确保兼容性。
通过掌握 shape-outside 属性的用法，可以创建出更加丰富、独特的文本环绕效果，提升网页的设计质量和用户体验。