CSS 数据类型 - box-edge_CSS 菜鸟教程

CSS 数据类型 <box-edge> 定义不同的 box 边缘，例如 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 称为 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，将内容包裹在坐标框边界周围。在 SVG 中，它是对象的边界框。
stroke-box	在 SVG 中，stroke-box 是指描边边界框。在 CSS 中，它的行为类似于 border-box，在添加笔画时确定元素的形状。
view-box	它引用最近的 SVG 视区的原始框，该视区是一个矩形，其尺寸由 viewBox 属性确定。此矩形位于坐标系原点的左上角。在 CSS 中，view-box 的行为类似于 border-box

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

以下示例演示了如何使用带有 background-clip 属性的 <visual-box> 来显示各种值的效果，包括 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> 与 fill-box 和 stroke-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">
	 	 	 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> 与 fill-box 和 stroke-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> 值（如圆、椭圆、inset、polygon、path）的 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="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>

<< CSS - 伪元素 - ::before CSS 数据类型 - named-color >>