迹忆客 专注技术分享

在本文中，我们将介绍在 CSS 中设置容器内部边框的方法。容器内部的边界称为内边界。

在 CSS 中使用 box-sizing 属性设置内边框

当我们为容器内的元素添加边框或内边距时，容器的大小会增加。大小将与初始大小不同。为了消除这个问题，我们可以给容器添加一个内边框。

内边框是在边框和轮廓属性或元素之间创建的空间。我们可以对表格内容、图像以及段落和标题的文本应用内边框。内边框可以是矩形、正方形、圆形等任何形状。

内边框不会增加容器的大小，预定义的大小将保持不变。我们可以使用 box-sizing 属性在 CSS 中创建一个内边框。将 box-sizing 属性设置为 border-box 将包括容器尺寸内的边框和内边距。

例如，通过将 box-sizing 属性设置为 border-box 来设置 div 的样式。将 div 的高度和宽度设置为 200px。接下来，创建一个 10px 宽度和 red 颜色的 solid 边框。然后，将 background 属性设置为 green。

在这里，我们创建了一个尺寸为 200x200 px 的 div。即使我们添加了 10px 的边框，容器的尺寸也没有改变。边界位于容器内。因此，我们可以使用 box-sizing 属性在 CSS 中设置内边框。

示例代码：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

在 CSS 中使用 box-shadow 属性设置内边框

实现内边框的另一种方法是使用 box-shadow CSS 属性。使用该属性，我们可以指定内嵌的阴影，看起来就像一个内边界，而不是一个阴影。

我们可以将 box-shadow 的水平和垂直偏移值设置为前两个值。其他三个值，blur、spread 和 color，是可选的。我们可以将扩散半径设置为所需的值以创建阴影。然后，使用 inset 选项会将外部阴影更改为内部阴影。阴影将落在容器内。最后，它看起来像一个内边框。

例如，将 div 的 height 和 width 属性设置为 200px。将背景颜色设置为绿色。然后，使用 box-shadow 属性并将前三个选项设置为 0px。设置扩散半径，第四个选项为 10px。赋予颜色红色并设置 inset 选项。

在这里，我们使用 box-shadow 属性创建了一个宽度为 10px 的内边框。

示例代码：

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

在 CSS 中使用 outline 和 outline-offset 属性设置内边框

我们可以使用 CSS 中的 outline 和 outline-offset 属性设置内边框。outline 属性描述了元素的边框大小、边框类型和边框颜色。outline-offset 属性描述了边框和轮廓元素之间的距离或空间。

例如，将 div 的高度和宽度设置为 200px。给绿色作为背景。接下来，将 outline 设置为 5px solid red。然后，将 outline-offset 设置为 -5px。

在这里，outline 属性在容器中创建了一个外边框。使用 outline-offset 属性并将其设置为边框宽度的负值会将外边框更改为内边框。

示例代码：

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>