CSS - shape-outside

上一页
下一页

CSS shape-outside 属性用于定义一个形状，内联内容（如文本或图像）应围绕该形状换行。此属性对于创建非矩形或复杂文本换行形状特别有用。

可能的值

  • none − 内联内容围绕元素的边距框流动，而浮动区域保持不变。

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

  • content-box − 它表示内容外边缘周围的形状。盒子的角半径是通过取 0 和 border-radius - border-width - padding 之间的较大值来确定的。

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

  • padding-box − 它表示填充外边缘周围的形状。边框内部的形状遵循标准的边框半径成形规则。

  • <basic-shape> − 使用诸如 circle()、ellipse()、polygon() 或 path()（在 2 级规范中引入）之类的函数创建的形状决定浮动区域。

  • url() − 它标识应使用哪个图像来围绕文本换行。

  • linear-gradient() − 创建文本和其他内联内容可以围绕其换行的渐变形状。

应用于

浮动元素。

语法

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

以下示例演示了属性 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 - 相关属性

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

属性 值
shape-margin 向使用 shape-outside 属性创建的 CSS 形状添加边距。
shape-image-threshold 使用 shape-outside 属性使用图像时，设置形状提取的 alpha 通道阈值。
打印页面
上一页
下一页
广告