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 通道閾值。
列印頁面
上一頁
下一頁
廣告