CSS - shape-outside 属性

上一页
下一页

CSS shape-outside 属性用于定义内联内容（如文本或图像）应围绕该形状进行包装。此属性对于创建非矩形或复杂的文本换行形状特别有用。

可能的值

  • none − 内联内容在元素的边距框周围流动，而浮动区域保持不变。
  • margin-box − 它表示边距外边缘周围的形状，角半径由 border-radius 和 margin 值指定。
  • content-box - 它表示内容外边缘周围的形状。框的角半径是通过取 0 和 border-radius - border-width - padding 之间的较大值来确定的。
  • border-box - 它表示边框外边缘周围的形状。边框外侧的形状遵循标准边框半径整形规则。
  • padding-box - 它表示围绕外部填充边缘的形状。边框内侧的形状遵循标准边框半径整形规则。
  • <basic-shape> - 使用 circle（）、ellipse（）、polygon（） 或 path（） 等函数创建的形状（在 2 级规范中引入）确定浮点区域。
  • url（） - 它标识应该使用哪个图像来包裹文本。
  • linear-gradient（） - 创建文本和其他内联内容可以环绕的渐变形状。

适用于

Floats.

语法


shape-outside = none | margin-box | content-box | border-box | padding-box | circle() | ellipse() | inset() | polygon | path() | url() | linear-gradient();

CSS shape-outside - 边距框

以下示例演示了 shape-outside： 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>
	 	 	 	 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	 	 </p>
	 	 	 <p>
	 	 	 	 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	 	 </p>
</body>
</html>

CSS shape-outside - 内容框

以下示例演示了属性 shape-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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</p>
	 	<p>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</p>
</body>
</html>

CSS shape-outside - 填充框

以下示例演示了属性 shape-outside： 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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</p>
	 	<p>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</p>
</body>
</html>

CSS shape-outside - 边框框

以下示例演示了属性 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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</p>
	 	<p>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
	 	</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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	</p>
</body>
</html>

CSS 形状外 - 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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum.
	 	 </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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	</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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 </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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	</p>
	 	</div>
</body>
</html>

CSS shape-outside - 路径（）

以下示例演示了 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>
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	</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>
	 	 	 	 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
	 	 	 	 	vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
	 	 	 	 	facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
	 	 	 	 	congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
	 	 	 </p>
	 	</div>
</body>
</html>

CSS shape-outside - 相关属性

以下是与 shape-outside 相关的 CSS 属性列表：

属性 值
shape-margin 为使用 shape-outside 属性创建的 CSS 形状添加边距。
shape-image-threshold 使用具有 shape-outside 属性的图像时设置形状提取的 Alpha 通道阈值。
打印本页
上一页
下一页