Css 简明教程

CSS - shape-outside

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

CSS shape-outside property is used to define a shape around which inline content (such as text or images) should wrap. This property is particularly useful for creating non-rectangular or complex text wrapping shapes.

Possible Values

  1. none − Inline content flows around the element’s margin box, while the float area remains unchanged.

  2. margin-box − It represents the shape around the outside edge of the margin, with the corner radii specified by the border-radius and margin values.

  3. content-box − It represents the shape around the outside edge of the content. The corner radius of the box is determined by taking the larger value between 0 and border-radius - border-width - padding.

  4. border-box − It represents the shape around the outside edge of the border. The shape for the outside of the border follows the standard border radius shaping rule.

  5. padding-box − It represents the shape around the outside padding edge. The shape for the inside of the border follows the standard border radius shaping rule.

  6. <basic-shape> − The shape created with functions such as circle(), ellipse(), polygon(), or path() (introduced in the level 2 specification,) determines the float area.

  7. url() − It identifies which image should be used to wrap text around.

  8. linear-gradient() − To create gradient shapes that text and other inline content can wrap around.

Applies to

浮动。

Floats.

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 属性，确定了内容应环绕元素边距框的外缘 -

The following example demonstrates the proeprty shape-outside: margin-box property defines that content should wrap around the outer edge of the element’s 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* 属性，确定了内容应环绕元素的内容框 -

The following example demonstrates the property*shape-outside: content-box* property defines that content should wrap around the element’s 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 属性，确定了内容应环绕元素填充框的外缘 -

The following example demonstrates the property shape-outside: padding-box property defines that content should wrap around the outer edge of the element’s 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 属性，确定了内容围绕元素外边框形成的形状流动 -

The following example demonstrates the property shape-outside: border-box defines the flow of the content around the shape defined by the outer border of the element −

<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() 通过创建圆形，并在圆的边缘进行内容环绕。

The following example demonstrates the property shape-outside: circle() property creates a circular shape, and the content wraps around the edge of the 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() 通过创建椭圆，并在元素的边界框进行内容环绕。

The following example demonstrates the property shape-outside: ellipse() property creates a ellipse shape, and the content wraps around the element’s bounding box −

<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() 允许文本围绕图像定义的形状流动。

The following example demonstrates the property shape-outside: url() property allowing text to flow around the defined shape of the image −

<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() 创建多边形，并在元素的边界框进行内容环绕。

The following example demonstrates that the shape-outside: polygon() creates a polygonal shape, and the content wraps around the element’s bounding box −

<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() 创建矩形，并围绕矩形的边缘进行内容环绕。

The following example demonstrates that the shape-outside: inset() property create rectangular shape, and the content wraps around the edge of the rectangle −

<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() 创建三角形并允许文本在其周围流动。

The following example demonstrates that the shape-outside: path() property creates triangular shape and allowing text to flow around it −

<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() 允许文本围绕线性渐变所定义的形状流动。

The following example demonstrates that the shape-outside: linear-gradient() property allowing text to flow around the shape defined by 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 相关的属性列表：

Following is the list of CSS properties related to shape-outside:

property

value

shape-margin

Adds margin to CSS shapes that are created with the shape-outside property.

shape-image-threshold

Sets the alpha channel threshold for shape extraction when using an image with the shape-outside property.