CSS 数据类型

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盒子外部的填充称为填充-盒子。在 SVG 中，它与"内容框"相同。如果一个盒子没有内边距，它类似于"content-box"。
border-box盒子边框的外边缘是称为边框。在 SVG 中，它与"描边框"相同。
margin-box框边距的外边缘称为边距框。在 SVG 中，它与"描边框"相同。
fill-box填充框的行为与 CSS 中的内容框类似，包装内容围绕坐标框边界。在 SVG 中，它是对象的边界框。
stroke-box在 SVG 中，描边框指的是描边边界框。在 CSS 中，它的行为类似于 border-box，确定添加笔画时元素的形状。
view-box它指的是原点最近的 SVG 视口的 box，它是一个矩形，其尺寸由 viewBox 属性确定。该矩形位于坐标系原点的左上角。在 CSS 中，视图框的行为类似于 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>
         学习是一个人的真正看家本领，是人的第一特点，第一长处，第一智慧，第一 本源。其他一切都是学习的结果，学习的恩泽。学习是一个人的真正看家本领，是人的第一特点，第一长处，第一智慧，第一 本源。其他一切都是学习的结果，学习的恩泽。
         学习是一个人的真正看家本领，是人的第一特点，第一长处，第一智慧，第一 本源。其他一切都是学习的结果，学习的恩泽。学习是一个人的真正看家本领，是人的第一特点，第一长处，第一智慧，第一 本源。其他一切都是学习的结果，学习的恩泽。
      </p>
</body>
</html>

CSS <box- edge>: <paint-box>

以下示例演示如何使用 <paint-box> 以及填充框和描边框值的 mask-clip 属性 -

<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">
      在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。
   </div>
   <h3><paint-box> for stroke-box</h3>
   <div class="mask-stroke">
     在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。
   </div>
</body>
</html>

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

以下示例演示如何使用 <coord-box> 以及填充框和描边框值的 offset-path 属性 -

<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> 与 <basic-shape> 值（例如圆、椭圆、插图、多边形、路径）的 Clip-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="/css/images/pink-flower.jpg" class="clip-inset">
   </div>
   <div class="image-container">
      <h3>Circle</h3>
      <img src="/css/images/pink-flower.jpg" class="clip-circle">
   </div>
   <div class="image-container">
      <h3>Ellipse</h3>
      <img src="/css/images/pink-flower.jpg" class="clip-ellipse">
   </div>
   <div class="image-container">
      <h3>Ploygon</h3>
      <img src="/css/images/pink-flower.jpg" class="clip-ploygon"> 
   </div>
   <div class="image-container">
      <h3>Path</h3>
      <img src="/css/images/pink-flower.jpg" class="clip-path">
   </div>
</body>
</html>