Css 简明教程

CSS - shape-outside

CSS shape-outside 属性用于定义一个形状，让行内内容（例如文本或图像）环绕其进行排列。此属性对于创建非矩形或复杂的文本环绕形状特别有用。

Possible Values

  1. none − 行内内容沿元素的外边距框流动，而浮动区域保持不变。

  2. margin-box − 它表示外边距外侧边缘周围的形状，其圆角半径由 border-radius 和外边距值指定。

  3. content-box − 它表示内容外侧边缘周围的形状。该框的圆角半径由 0 和 border-radius - border-width - padding 之间较大值确定。

  4. border-box − 它表示边框外侧边缘周围的形状。边框外部的形状遵循标准边框半径成形规则。

  5. padding-box − 它表示外边距外侧边缘周围的形状。边框内的形状遵循标准边框半径成形规则。

  6. <basic-shape> - 使用 circle() 、 ellipse() 、 polygon() 或 path() （在级别 2 规范中引入）等函数创建的形状决定了浮动区域。

  7. url() - 它标识了应使用哪张图像来环绕文本。

  8. linear-gradient() - 创建可以使文本和其他内联内容环绕的渐变形状。

Applies to

浮动。

Syntax

shape-outside = none | margin-box | content-box | border-box | padding-box | circle() | ellipse() | inset() | polygon | path() | url() | linear-gradient();

CSS shape-outside - margin-box

以下示例演示了 shape-outside: margin-box 属性，确定了内容应环绕元素边距框的外缘 -

<html>
<head>
<style>
   .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: violet;
      border: 8px blue;
      border-style: dashed double;
      padding: 20px;
      text-align: center;
      background-clip: content-box;
      shape-outside: margin-box;
      margin: 20px;
   }
</style>
</head>
<body>
   <div class="box-shape">content box</div>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
      </p>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
      </p>
</body>
</html>

CSS shape-outside - content-box

以下示例演示了 property*shape-outside: content-box* 属性，确定了内容应环绕元素的内容框 -

<html>
<head>
<style>
  .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: violet;
      border: 8px blue;
      border-style: dashed double;
      padding: 20px;
      text-align: center;
      background-clip: content-box;
      shape-outside: content-box;
      margin: 10px;
  }
</style>
</head>
<body>
   <div class="box-shape">content box</div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
</body>
</html>

CSS shape-outside - padding-box

以下示例演示了 shape-outside: padding-box 属性，确定了内容应环绕元素填充框的外缘 -

<html>
<head>
<style>
   .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: violet;
      border: 8px blue;
      border-style: dashed double;
      padding: 20px;
      text-align: center;
      background-clip: content-box;
      shape-outside: padding-box;
      margin: 10px;
   }
</style>
</head>
<body>
   <div class="box-shape">content box</div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
</body>
</html>

CSS shape-outside - border-box

以下示例演示了 shape-outside: border-box 属性，确定了内容围绕元素外边框形成的形状流动 -

<html>
<head>
<style>
   .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: violet;
      border: 8px blue;
      border-style: dashed double;
      padding: 20px;
      text-align: center;
      background-clip: content-box;
      shape-outside: border-box;
      margin: 10px;
   }
</style>
</head>
<body>
   <div class="box-shape">content box</div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu justo. Integer et ex ut justo auctor aliquam ac nec augue. Vivamus sit amet augue vitae mi scelerisque congue ac vel lacus.
   </p>
</body>
</html>

CSS shape-outside - circle()

以下示例演示了属性 shape-outside: circle() 通过创建圆形，并在圆的边缘进行内容环绕。

<html>
<head>
<style>
   .circle-shape {
      float: left;
      width: 150px;
      height: 150px;
      margin: 10px;
      shape-outside: circle(50%);
   }
</style>
</head>
<body>
   <div class="circle-shape"></div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
   </p>
</body>
</html>

CSS shape-outside - ellipse()

以下示例演示了属性 shape-outside: ellipse() 通过创建椭圆，并在元素的边界框进行内容环绕。

<html>
<head>
<style>
  .ellipse-shape {
    float: left;
    width: 150px;
    height: 250px;
    margin: 10px;
    shape-outside: ellipse(50px 100px at 50% 50%);
  }
</style>
</head>
<body>
  <div class="ellipse-shape"></div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum.
    </p>
  </div>
</body>
</html>

CSS shape-outside - url()

以下示例演示了属性 shape-outside: url() 允许文本围绕图像定义的形状流动。

<html>
<head>
<style>
   .url-shape {
      float: left;
      width: 150px;
      height: 100px;
      margin: 10px;
      shape-outside: url("images/yellow-flower.jpg");
   }
</style>
</head>
<body>
   <div class="url-shape"></div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
   </p>
   </div>
</body>
</html>

CSS shape-outside - polygon()

以下示例演示了 shape-outside: polygon() 创建多边形，并在元素的边界框进行内容环绕。

<html>
<head>
<style>
   .polygon-shape {
      float: left;
      width: 150px;
      height: 100px;
      margin: 10px;
      shape-outside: polygon(0 0, 0 200px, 200px 300px);
   }
</style>
</head>
<body>
   <div class="polygon-shape"></div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      </p>
   </div>
</body>
</html>

CSS shape-outside - inset()

以下示例演示了 shape-outside: inset() 创建矩形，并围绕矩形的边缘进行内容环绕。

<html>
<head>
<style>
   .inset-shape {
      float: left;
      width: 150px;
      height: 100px;
      margin: 10px;
      shape-outside: inset(10px 10px 10px 10px);
   }
</style>
</head>
<body>
   <div class="inset-shape"></div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
   </p>
   </div>
</body>
</html>

CSS shape-outside - path()

以下示例演示了 shape-outside: path() 创建三角形并允许文本在其周围流动。

<html>
<head>
<style>
   .path-shape {
      float: left;
      width: 90px;
      height: 90px;
      margin: 10px;
      background-color: violet;
      clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
      shape-outside: polygon(0% 0%, 100% 0%, 0% 100%);
   }
</style>
</head>
<body>
   <div class="path-shape"></div>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
      vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
      facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
      congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
   </p>
   </div>
</body>
</html>

CSS shape-outside - linear-gradient()

以下示例演示了 shape-outside: linear-gradient() 允许文本围绕线性渐变所定义的形状流动。

<html>
<head>
<style>
   .gradient-shape {
      float: left;
      width: 150px;
      height: 150px;
      background: linear-gradient(45deg, #fff 150px, red 150px);
      shape-outside: linear-gradient(45deg, #fff 150px, red 150px);
      margin-right: 20px;
   }
   .content {
      margin-top: 20px;
      font-size: 16px;
   }
</style>
</head>
<body>
   <div class="gradient-shape"></div>
   <div class="content">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris sit amet augue consectetur
         vestibulum. Integer id tortor nec justo consequat laoreet. Aenean volutpat lacinia turpis at
         facilisis. Proin in malesuada ligula, at cursus erat. Nullam vehicula justo in erat posuere
         congue. Morbi bibendum purus sit amet libero sagittis, eu tincidunt augue congue.
      </p>
   </div>
</body>
</html>

CSS shape-outside - Related Properties

以下为 CSS 与 shape-outside 相关的属性列表：

property

value

shape-margin

为使用 shape-outside 属性创建的 CSS 形状添加边距。

shape-image-threshold

使用 shape-outside 属性将图像作为形状提取时，设置 Alpha 通道阈值。