在 CSS 中设置内边框

“内边框”可能指两种不同需求：为元素设置边框时保持声明的尺寸不变，或在元素边缘内侧绘制可见的线条。第一种需求使用 box-sizing: border-box，要绘制清晰的内侧线条可使用 box-shadow: inset，也可以用负值 outline-offset 将轮廓线向内移动。

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

box-sizing: border-box 会将元素的内边距和边框计入声明的宽度和高度。它控制尺寸的计算方式，但不会在元素内部绘制单独的线条。若要创建带有 10px 红色边框的 200px 正方形，可使用 box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;。外部盒子的尺寸仍为 200 × 200 像素，红色边框占据其中一部分空间。如果内容需要与边框保持距离，可以添加 padding。默认的 content-box 会将宽度和高度作为内容区域的尺寸，因此内边距和边框会使外部尺寸增大。如果组件必须适应已知的布局尺寸，border-box 会很有用；但它不能代替对合适边框宽度的选择。

下面这个独立的 JavaScript 示例会输出包含相同尺寸和边框设置的 HTML：

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

将输出的标记粘贴到 HTML 文档中，即可查看这个固定尺寸的正方形。

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

如果要绘制可见的线条，又不想改变元素的布局尺寸，可以使用内嵌 box-shadow。例如，要创建一个带有 10px 红色线条的 200px 绿色正方形，可将以下 CSS 应用于 <div>Content</div>：<div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>。阴影值的前两项分别是水平和垂直偏移；此处两者均为零，因此线条在每一侧的宽度相同。第三项是模糊半径，设为零时边缘清晰。第四项是扩展半径，在此示例中用于设置线条厚度。inset 会将阴影绘制在盒子内部。调整颜色或扩展半径即可改变外观；模糊半径和扩展半径在适当时可以省略，因为两者的默认值都是零。阴影不会占用布局空间，因此附近元素的位置保持不变。如果同时设置边框，边框仍会显示，并可能遮住部分内嵌阴影。

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

轮廓线会绘制在元素周围，但不会占用布局空间。在绿色背景的 200px 正方形 <div>Content</div> 上设置 outline: 5px solid red; outline-offset: -5px;，即可将红色轮廓线向内移动。负偏移值会将轮廓线从外边缘向内容方向拉动，但不会将轮廓线变成边框。由于轮廓线绘制在元素上方，它可能与边缘附近的文本或其他内容重叠。只有在可以接受这种覆盖效果时才使用此方法；如果希望内侧线条保持在元素的绘制区域内，可选择 box-shadow。