CSS shape-outside 属性用于定义内联内容（例如文本或图像）应环绕的形状。此属性对于创建非矩形或复杂的文本环绕形状特别有用。
属性值
none: 内联内容围绕文本流动元素的边距框，而浮动区域保持不变。
margin-box: 它表示边距外边缘周围的形状，其角半径由 border- 指定半径和边距值。
content-box: 它表示内容外边缘周围的形状。盒子的角半径通过取 0 和 border-radius: border-width: padding 之间的较大值来确定。
border-box: 它代表盒子周围的形状边界的外边缘。边框外部的形状遵循标准边框半径整形规则。
padding-box: 它表示外部填充边缘周围的形状。边框内部的形状遵循标准边框半径整形规则。
<basic-shape>: 使用circle()、ellipse()、polygon 等函数创建的形状() 或 path() （在 2 级规范中引入）确定浮动区域。
url(): 它标识应使用哪个图像来环绕文本.
linear-gradient(): 创建文本和其他内联内容可以环绕的渐变形状。
适用范围
浮动。
语法
shape-outside = none | margin-box | content-box | border-box | padding-box | circle() | ellipse() | inset() | polygon | path() | url() | linear-gradient(); CSS shape-outside: margin-box
以下示例演示了属性 shape- external: margin-box 属性定义内容应环绕元素边距框的外边缘 -
<html>
<head>
<style>
.box-shape {
float: left;
width: 150px;
height: 150px;
background-color: violet;
border: 8px blue;
border-style: dashed double;
padding: 20px;
text-align: center;
background-clip: content-box;
shape-outside: margin-box;
margin: 20px;
}
</style>
</head>
<body>
<div class="box-shape">content box</div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
</body>
</html> CSS shape-outside: content-box
下面的示例演示了 propertyshape -outside: content-box 属性定义内容应环绕元素的内容框 -
<html>
<head>
<style>
.box-shape {
float: left;
width: 150px;
height: 150px;
background-color: violet;
border: 8px blue;
border-style: dashed double;
padding: 20px;
text-align: center;
background-clip: content-box;
shape-outside: content-box;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-shape">content box</div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
</body>
</html> CSS shape-outside: padding-box
以下示例演示了属性 shape-outside : padding-box 属性定义内容应该环绕元素的 padding box 的外边缘 -
<html>
<head>
<style>
.box-shape {
float: left;
width: 150px;
height: 150px;
background-color: violet;
border: 8px blue;
border-style: dashed double;
padding: 20px;
text-align: center;
background-clip: content-box;
shape-outside: padding-box;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-shape">content box</div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
</body>
</html> CSS shape-outside: border-box
下面的示例演示了属性 shape -outside: border-box 定义元素外边框定义的形状周围内容的流动 -
<html>
<head>
<style>
.box-shape {
float: left;
width: 150px;
height: 150px;
background-color: violet;
border: 8px blue;
border-style: dashed double;
padding: 20px;
text-align: center;
background-clip: content-box;
shape-outside: border-box;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-shape">content box</div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。 </p>
</body>
</html> CSS shape-outside: Circle()
以下示例演示属性 shape-outside:circle() 属性创建一个圆形形状，内容围绕圆形边缘 -
<html>
<head>
<style>
.circle-shape {
float: left;
width: 150px;
height: 150px;
margin: 10px;
shape-outside: circle(50%);
}
</style>
</head>
<body>
<div class="circle-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</body>
</html> CSS shape-outside: ellipse()
以下示例演示了 shape-outside 属性: ellipse() 属性创建一个椭圆形状，内容环绕元素的边界框 -
<html>
<head>
<style>
.ellipse-shape {
float: left;
width: 150px;
height: 250px;
margin: 10px;
shape-outside: ellipse(50px 100px at 50% 50%);
}
</style>
</head>
<body>
<div class="ellipse-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: url()
以下示例演示了 shape-outside 属性:url() 属性允许文本围绕图像的定义形状流动 -
<html>
<head>
<style>
.url-shape {
float: left;
width: 150px;
height: 100px;
margin: 10px;
shape-outside: url("images/yellow-flower.jpg");
}
</style>
</head>
<body>
<div class="url-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: Polygon()
下面的示例演示了 shape-outside: Polygon() 创建一个多边形形状，并且内容环绕元素的边界框 -
<html>
<head>
<style>
.polygon-shape {
float: left;
width: 150px;
height: 100px;
margin: 10px;
shape-outside: polygon(0 0, 0 200px, 200px 300px);
}
</style>
</head>
<body>
<div class="polygon-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: inset()
以下示例演示了 shape-outside: inset() 属性创建矩形形状，并且内容环绕矩形边缘 -
<html>
<head>
<style>
.inset-shape {
float: left;
width: 150px;
height: 100px;
margin: 10px;
shape-outside: inset(10px 10px 10px 10px);
}
</style>
</head>
<body>
<div class="inset-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: path()
以下示例演示了 shape-outside:path() 属性创建三角形并允许文本围绕其流动 -
<html>
<head>
<style>
.path-shape {
float: left;
width: 90px;
height: 90px;
margin: 10px;
background-color: violet;
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
}
</style>
</head>
<body>
<div class="path-shape"></div>
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: Linear-gradient()
以下示例演示了 shape-outside: Linear-gradient() 属性允许文本围绕由 Linear-gradient 定义的形状流动 -
<html>
<head>
<style>
.gradient-shape {
float: left;
width: 150px;
height: 150px;
background: linear-gradient(45deg, #fff 150px, red 150px);
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);
margin-right: 20px;
}
.content {
margin-top: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="gradient-shape"></div>
<div class="content">
<p>
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
</div>
</body>
</html> CSS shape-outside: 相关属性
以下是与 shape-outside 相关的 CSS 属性列表:
| 属性 | 值 |
|---|---|
| shape-margin | 为使用 shape-outside 属性创建的 CSS 形状添加边距. |
| shape-image-threshold | 集使用具有 shape-outside 属性的图像时形状提取的 Alpha 通道阈值。 |