CSS shape-margin 属性

CSS shape-margin 属性与 shape-outside 属性一起使用，用于定义文本或内容应围绕指定形状保持的边距。这两个属性结合使用，可以控制内容与其环绕的形状之间的间距。

可能的值

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

应用于

浮动元素。

语法

shape-margin = <length-percentage>;

CSS shape-margin - <length> 值

下面的例子演示了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 - <percentage> 值

下面的例子演示了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>

打印页面