不同shape-outside图形函数效果实例页面

展示

代码

• HTML：

  <h4>shape-outside:<output id="output">circle()</output></h4>
  <div class="container">
      <span class="shape"></span>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容。</p>
      <p>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字。</p>
  </div>
                  

• CSS：

  .shape {
      float: left;
      width: 100px; height: 100px;
      background-color: currentColor;
      shape-outside: circle();
      clip-path: circle();
      color: #cd0000;
  }

• JS：

  [].slice.call(document.querySelectorAll('input[name="shape"]')).forEach(function (radio) {
      radio.addEventListener('click', function () {
          document.querySelector('.shape').style.shapeOutside = this.value;
          document.querySelector('.shape').style.clipPath = this.value;
          document.querySelector('#output').textContent = this.value;
      });
  });