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>
打印页面
上一页
下一页
广告