三种用于添加元素边框的 CSS 方法
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
这是我过去13年多前端开发经验中，探讨现代CSS解决方案如何解决各种问题的系列视频的第23集。访问ModernCSS.dev即可查看完整系列视频及其他资源。
说到 CSS，有时候 aborder并不是真正的 a border。
在本期节目中，我们将介绍以下几点之间的区别：
borderoutlinebox-shadow
我们还会讨论何时应该使用其中一种方法而不是另一种。
CSS盒模型回顾
我们这三种边框方法的主要区别在于它们在元素上的位置以及它们如何影响元素的尺寸。这种行为由 CSS 盒模型控制。
- 它
border正是元素的边界，位于其内边距和外边距之间，其宽度会影响计算出的元素尺寸。 - 该元素
outline位于 旁边但位于 之外，与和border都有重叠，但不影响元素的尺寸。box-shadowmargin - 默认情况下，
box-shadow它会从边框边缘向外延伸，覆盖指定方向上的空间，并且不会影响元素的尺寸。
border语法和用法
自互联网诞生以来，边框一直是设计中的标准元素。
与我们将要介绍的其他两种方法相比，一个重要的区别在于，默认情况下，边框包含在元素的计算尺寸中。即使您设置了box-sizing: border-box边框，它们仍然会影响计算结果。
边框最基本的语法定义了边框的宽度和样式：
border: 3px solid;
如果未定义，则默认颜色为，currentColor这意味着它将使用color级联中最接近的定义。
但是边框样式还有更多选择，border-style您可以根据需要为每一边定义不同的样式。
请访问MDN 文档查看所有可用
border-style值和示例。
何时使用border
当样式可以根据元素的尺寸自动计算时，边框是一个不错的选择（此处双关）。而且，默认样式提供了很大的设计灵活性。
继续阅读，你将获得一个只有你能做到的额外小技巧！
border
outline语法和用法
对于轮廓线，使其可见的唯一必需属性是提供样式，因为默认值为none：
outline: solid;
就像边框一样，它将通过颜色获得currentColor，其默认宽度为medium。
典型的应用outline是通过浏览器原生样式来控制:focus链接和按钮等交互元素。
除非您能够提供符合WCAG 成功标准 2.4.7 Focus Visible 的自定义样式，否则出于可访问性的目的，应该允许此特定应用程序发生。:focus
从设计角度来看，一个经常被指出的问题outline是它无法从任何样式继承曲线border-radius。
何时使用outline
outline当您不想影响元素的尺寸，也不需要它遵循某个规则时，使用 `<div>`可能是可取的。border-radius.它恰好使用与边框相同的样式值，因此您可以获得类似的外观。
box-shadow语法和用法
最少需要的属性是 x和y 轴box shadow的值以及颜色：xy
box-shadow: 5px 8px black;
（可选）添加第三个单元以创建blur，添加第四个单元以添加spread。
请观看我在 egghead 上发布的 4.5 分钟视频演示，了解更多关于扩展语法以及使用技巧的信息
box-shadow。
要用它来创建边框，我们需要设置 xx和 yy轴的值，以及 y 轴blur的值0。然后，为 y 轴设置一个正数spread：
box-shadow: 0 0 0 3px blue;
这将在元素周围创建边框，甚至可以跟随应用border-radius：
何时使用box-shadow
当您想要为边框添加动画效果而不导致布局偏移时，您可能会box-shadow特别喜欢这种方法。下一节将演示这种情况的示例。
而且由于box-shadow它可以分层使用，因此它是一个非常棒的工具，值得学习，可以增强你的布局。
但是，它无法完全模仿border和提供的某些样式outline。
综合起来
以下是一些你可能需要使用border替代方案的实际场景。
按钮边框
border当为带边框和不带边框的按钮提供样式，并且它们并排排列时，实际样式可能会出现问题。
一个典型的解决方案通常是将无边框按钮的尺寸增加到等于border-width。
利用我们新掌握的知识，另一种解决方案是使用box-shadow关键字inset将伪边框视觉上放置在按钮内部：
请注意，您的内边距必须大于border-width文本内容，以防止文本内容重叠。
或者，您可能想在或 上添加边框。使用实际的，布局切换时会出现不理想的视觉跳跃，因为会在这些状态下短暂增加尺寸。:hover:focusborderborder
在这种情况下，我们可以用它box-shadow来创建伪边框，这样实际尺寸就不会增加——此外，我们还可以使用以下方法为其添加动画效果transition：
以下是上述示例的简化代码：
button {
transition: box-shadow 180ms ease-in;
}
button:hover {
box-shadow: 0 0 0 3px tomato;
}
升级你的 CSS 调试方法
一个经典的 CSS 笑话是，要解决 CSS 问题，特别是溢出滚动或定位问题，只需添加：
* { border: 1px solid red }
这将为每个元素添加红色边框。
但正如我们所了解到的，这也会影响它们的计算尺寸，从而可能意外地给您带来其他问题。
请改用：
* { outline: 1px solid red; }
小测验：它们将
outline放置在哪里？为什么这是一个更好的解决方案？
使用这种方法的一个潜在后果border是，内容重新绘制后会出现滚动条。而使用这种方法则不会出现这种副作用outline。
此外，您可能border已经在使用元素，因此普遍更改元素border将导致布局偏移，这肯定会引入新的问题。
附注：浏览器开发者工具也发展出了更完善的元素识别方法，Firefox甚至添加了“scroll”和“overflow”标签，这在调试溢出问题时非常有用。我建议您花些时间了解更多关于开发者工具的功能！
确保视觉焦点
为了方便用户使用，您可能没有意识到 Windows 高对比度模式 (WHCM) 的用户也存在这种情况。
在此模式下，您提供的颜色将被简化为高对比度调色板。并非所有 CSS 属性都允许使用，包括box-shadow。
一个实际的影响是，如果您已将其移除outline并:focus替换为box-shadow，WHCM 的用户将不再获得可见的焦点。
为了消除这种负面影响，您可以应用transparent轮廓线:focus：
button:focus {
outline: 2px solid transparent;
}
关于这个具体问题的更多背景信息，请回顾关于按钮样式的那一集。
陷阱outline和box-shadow
由于 ` outline<div>` 和`<div>` 元素位于盒模型box-shadow边界之外，因此您可能会遇到的一个问题是它们会被视口边缘遮挡而消失。所以，如果您希望它们保持可见，可能需要margin向 `<div>` 元素或padding`<div>` 元素添加body`width` 属性作为应对措施。
overflow: hidden它们的位置也意味着它们可能会被诸如或使用之类的属性剪断clip-path。
额外提示：渐变边框
正如承诺的那样，这里有一个额外的技巧，它涉及我们讨论过的方法中只有一种方法border才能做到的事情。
一个经常被忽略的与边框相关的属性是border-image。当尝试将其用于实际图像时，其语法可能会有点奇怪。
但它还有一项隐藏的功能——它还可以创建渐变边框，因为 CSS 渐变从技术上讲也是图像：
solid这需要定义一个常规的边框宽度和样式（尽管无论样式值如何，它都只会显示为“无边框”），然后border-image是可以使用渐变语法的属性，只需添加一个参数即可。渐变后面的数字是slice值，对于我们的渐变，我们可以简单地使用一个值，1这样基本上不会改变渐变的大小/变形。
div {
border: 10px solid;
/* simplified from preview image */
border-image: linear-gradient(to right, purple, pink) 1;
}
如果只想在一侧添加边框，请务必先将其他边的边框值设置为零，否则某些浏览器仍会将边框添加到所有边：
div {
border-style: solid;
border-width: 0;
border-left-width: 3px;
/* border-image */
}
缺点是这些边框不遵循渐变规则border-radius，所以如果您需要一个遵循渐变规则的解决方案，可以使用检查器查看ModernCSS首页卡片的渐变添加方式 😉