CSS - shape-margin 属性

CSS shape-margin 属性与 shape-outside 属性结合使用，以定义文本或内容应在指定形状周围保持的边距。通过这些属性，您可以控制内容与其环绕的形状之间的间距。

可能的值

<length-percentage> - 通过使用数字长度或包含形状的容器宽度的百分比来设置形状之间的间距。

适用于

浮。

语法


shape-margin = <length-percentage>;

CSS shape-margin - <长度> 值

以下示例演示了 shape-margin： 10px 属性在空间周围添加 10px 的边距 -


<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 350px;
	 	}
	 	.shape-container {
	 	 	 float: left;
	 	 	 width: 140px;
	 	 	 height: 140px;
	 	 	 background-color: violet;
	 	 	 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;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="shape-container"></div>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
	 	 	 </div>
	 	</body>
</html>

CSS shape-margin - <百分比>值

以下示例演示了 shape-margin： 9% 属性在空间周围添加 9% 的边距 -


<html>
<head>
<style>
	 	.box {
	 	 	 max-width: 350px;
	 	}
	 	.shape-container {
	 	 	 float: left;
	 	 	 width: 140px;
	 	 	 height: 140px;
	 	 	 background-color: violet;
	 	 	 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: 9%;
	 	}
</style>
</head>
<body>
	 	<div class="box">
	 	 	 <div class="shape-container"></div>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
	 	</div>
	 	</body>
</html>

打印本页