CSS shape-image-threshold属性基本效果实例页面

展示

代码

• HTML：

  <h4>shape-image-threshold: 0</h4>
  <div class="container">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-image-threshold: 0.3</h4>
  <div class="container threshold-1">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-image-threshold: 0.6</h4>
  <div class="container threshold-2">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
  
  <h4>shape-image-threshold: 0.8</h4>
  <div class="container threshold-3">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>

• CSS：

  .shape {
      float: left;
      width: 200px; height: 120px;
      --gradient: linear-gradient(145deg, #cd0000, transparent);
      background: var(--gradient);
      shape-outside: var(--gradient);
      transition: shape-image-threshold .3s;
  }
  
  .threshold-1 .shape {
      shape-image-threshold: .3;
  }
  .threshold-2 .shape {
      shape-image-threshold: .6;
  }
  .threshold-3 .shape {
      shape-image-threshold: .8;
  }