不同shape-outside盒子布局效果实例页面

展示

代码

• HTML：

  <h4>shape-outside:none</h4>
  <div class="container">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  <h4>shape-outside:margin-box</h4>
  <div class="container">
      <span class="shape margin-box"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  <h4>shape-outside:border-box</h4>
  <div class="container">
      <span class="shape border-box"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  <h4>shape-outside:padding-box</h4>
  <div class="container">
      <span class="shape padding-box"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  <h4>shape-outside:content-box</h4>
  <div class="container">
      <span class="shape content-box"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>

• CSS：

  .shape {
      float: left;
      width: 60px; height: 60px;
      padding: 10px; margin: 10px;
      border: 10px solid;
      border-radius: 50%;
      background-color: currentColor;
      background-clip: content-box;
      color: #cd0000;
  }
  .margin-box {
      shape-outside: margin-box;
  }
  .border-box {
      shape-outside: border-box;
  }
  .padding-box {
      shape-outside: padding-box;
  }
  .content-box {
      shape-outside: content-box;
  }