CSS 資料型別 - <box-edge>

上一頁
下一頁

CSS <box-edge> 資料型別定義了不同的盒子邊緣，例如 content-box 和 border-box。Box-edge 指定了元素在螢幕上的定位和顯示方式。

box-edge 關鍵詞是資料型別的一部分，例如 <visual-box>、<layout-box>、<paint-box>、<coord-box> 和 <geometry-box>。它們與屬性一起使用，例如 transform-box 和 background-clip。

可能的值

  • <visual-box> − 網頁上包含元素內容、內邊距和邊框的矩形框，稱為 <box>，不包括外邊距區域，用於 background-clip 和 overflow-clip-margin。

  • <layout-box> − 它定義了元素佔據的總面積，包括內容、內邊距、邊框和外邊距。

  • <paint-box> − 它定義了佈局框內視覺顯示內容的區域，包括元素背景和邊框的繪製。

  • <coord-box> − 它描述了在父容器內定位和調整元素大小的座標框。此值控制內容圍繞框邊緣的流動。

  • <geometry-box> − 為基本形狀設定參考框，或者單獨使用時，將剪裁路徑設定為包含指定框的邊緣以及角部形狀（例如 border-radius）。

語法

<visual-box> = content-box | padding-box | border-box;
<layout-box> = <box> | margin-box; 
<paint-box> = <box> | fill-box | stroke-box;
<coord-box> = <box> | fill-box | stroke-box | view-box;
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box;

下表顯示了與 <box-edge> 資料型別相關的不同關鍵詞 −

關鍵詞 描述
content-box 內容框是盒子的最內層部分，包含文字、影像或 HTML 元素。在 SVG 中，它與“fill-box”相同。
padding-box 盒子外部的填充稱為 padding-box。在 SVG 中，它與“content-box”相同。如果盒子沒有填充，則類似於“content-box”。
border-box 盒子的邊框外邊緣稱為 border-box。在 SVG 中，它與“stroke-box”相同。
margin-box 盒子的外邊距外邊緣稱為 margin-box。在 SVG 中，它與“stroke-box”相同。
fill-box fill-box 的行為類似於 CSS 中的 content-box，將內容包裹在 coord-box 邊界周圍。在 SVG 中，它是物件的邊界框。
stroke-box 在 SVG 中，stroke-box 指的是描邊邊界框。在 CSS 中，它的行為類似於 border-box，在新增描邊時確定元素的形狀。
view-box 它指的是最近的 SVG 視口的原點框，它是一個矩形，其尺寸由 viewBox 屬性確定。此矩形位於座標系原點的左上角。在 CSS 中，view-box 的行為類似於 border-box。

CSS <box-edge> - <visual-box>

下面的例子演示了使用<visual-box>和background-clip屬性來顯示各種值的效應，包括border-box、padding-box和content-box −

<html>
<head>
<style>  
   p {
      border: 10px red;
      border-style: dashed double;
      margin: 10px;
      padding: 20px;
      background: lightblue;
   }
   .border-area {
      background-clip: border-box;
   }
   .padding-area {
      background-clip: padding-box;
   }
   .content-area {
      background-clip: content-box;
   }
</style>
</head>
<body>
   <p class="border-area">Border Box</p>
   <p class="padding-area">Padding Box</p>
   <p class="content-area">Content Box</p>
</body>
</html>

CSS <box-edge> - <layout-box>

下面的例子演示了使用<layout-box>和shape-outside: content-box屬性，定義內容應該圍繞元素的內容框包裹 −

<html>
<head>
<style>
   .box-shape {
      float: left;
      width: 150px;
      height: 150px;
      background-color: lightblue;
      border: 8px red;
      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.
         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 <box-edge> - <paint-box>

下面的例子演示了使用<paint-box>和mask-clip屬性以及fill-box和stroke-box值 −

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: gold;
      margin: 10px;
      border: 20px solid red;
      padding: 20px;
      -webkit-mask-image: url(images/book.png);
      -webkit-mask-size: 100% 100%;
      mask-image: url(images/book.png);
      mask-size: 100% 100%; 
   }
   .mask-fill {
      -webkit-mask-clip: fill-box;
      mask-clip: fill-box;
   }
   .mask-stroke {
      -webkit-mask-clip: stroke-box;
      mask-clip: stroke-box; 
   }
</style>
</head>
<body>
   <h3><paint-box> for fill-box</h3>
   <div class="mask-fill">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
   <h3><paint-box> for stroke-box</h3>
   <div class="mask-stroke">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS <box-edge> - <coord-box>

下面的例子演示了使用<coord-box>和offset-path屬性以及fill-box和stroke-box值 −

<html>
<head>
<style>
   .container {
      width: 300px;
      height: 200px;
      border: dashed lightgreen;
      border-width: 25px;
      padding: 25px;
      margin: 40px;
   }
   .box {
      width: 40px;
      height: 20px;
      animation: move 8000ms infinite ease-in-out;
   }
   .violet-border {
      background-color: violet;
      offset-path: fill-box;
      offset-distance: 5%;
   }
   .yellow-border {
      background-color: yellow;
      offset-path: stroke-box;
      offset-distance: 10%;
   }
   @keyframes move {
      0%,
      30% {
         offset-distance: 0%;
      }
      70%,
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box violet-border"></div>
      <div class="box yellow-border"></div>   
   </div>
</body>
</html>

CSS <box-edge> - <geometry-box>

下面的例子演示了使用<geometry-box>和clip-path屬性以及<basic-shape>值，例如 circle、ellipse、inset、polygon、path −

<html>
<head>
<style>
   .image-container {
      display: flex;
   }
   .clip-inset {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
   }
   .clip-circle {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: circle(50%);
   }
   .clip-ellipse {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: ellipse(100px 50px at 100px 100px);
   }
   .clip-ploygon {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   }
   .clip-path {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path:  path('M 100 100 L 0, 50 L 150,50 z');
   }
</style>
</head>
<body>
   <div class="image-container">
      <h3>Inset</h3>
      <img src="images/pink-flower.jpg" class="clip-inset">
   </div>
   <div class="image-container">
      <h3>Circle</h3>
      <img src="images/pink-flower.jpg" class="clip-circle">
   </div>
   <div class="image-container">
      <h3>Ellipse</h3>
      <img src="images/pink-flower.jpg" class="clip-ellipse">
   </div>
   <div class="image-container">
      <h3>Ploygon</h3>
      <img src="images/pink-flower.jpg" class="clip-ploygon"> 
   </div>
   <div class="image-container">
      <h3>Path</h3>
      <img src="images/pink-flower.jpg" class="clip-path">
   </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.