在本文中，我将介绍以下两者之间的区别：
borderoutlinebox-shadow我们还将讨论您何时可以使用另一种方法 。
CSS Box模型复习 这三种边框方法之间的一个关键区别是它们放置在元素的位置以及它们如何影响元素的维度，这种行为是由CSS box模型控制的 。
border 正是元素的边界，位于其padding和margin之间，它的宽度将影响计算出的元素尺寸 。
outline 在边框旁边但在边框之外，与 box-shadow 和 margin 重叠，但不影响元素的尺寸 。
默认情况下，box-shadow 从边框的边缘向外延伸，覆盖定义方向的空间量，也不会影响元素的尺寸 。
border 语法和用法 自网络诞生之初，边框就已经成为设计的标准 。
与我们将要介绍的其他两种方法相比，一个重要的区别是，默认情况下，border 包含在元素的计算尺寸中 。即使您设置 box-sizing：border-box，border 仍然会计入计算中 。
Border 最基本的语法定义了边框的宽度和样式：
border: 3px solid; 如果未定义则默认颜色为 currentColor，这意味着它将在级联中使用最接近的颜色定义 。
但 border 有更多的样式可供选择，如果你愿意，使用 border-style 你可以为每一面定义不同的样式 。
何时使用 border
当元素的尺寸允许样式计算时，border 是一个可靠的选择(双关语)，默认样式给了设计很大的灵活性 。
outline 语法和用法 对于outline，使其可见的唯一必需属性是提供一种样式，因为默认值为 none：
outline: solid; 【设置div边框样式 css加边框代码】和border一样，它将通过 currentColor 获得颜色，它的默认宽度为 medium 。
outline 的典型应用是通过本机浏览器样式对 :focus 元素（如链接和按钮）进行聚焦 。
除非您能够提供符合WCAG Success Criterion 2.4.7 Focus Visible的自定义 :focus 样式，否则应该允许发生这种特定的应用，以达到无障碍的目的 。
出于设计目的，通常要注意的 outline 问题是它无法从任何 border-radius 样式继承曲线 。
何时使用 outline
当您不想影响元素的尺寸并且不需要其遵循 border-radius 时，可以使用outline线 。
box-shadow 语法和用法 box-shadow 的最低要求属性是 x 和 y 轴的值以及颜色：
box-shadow: 5px 8px black; 可以选择添加第三个参数 blur 来制造模糊，第四个参数 spread 来添加模糊扩散程度 。
要使用它来创建边框，我们将 x 轴和 y 轴的值以及 blur 都设置为 0 ，然后为spread设置一个正数 。
box-shadow: 0 0 0 3px blue; 这将在元素周围创建边框的外观，甚至可以遵循所应用的 border-radius：
何时使用box-shadow
您可能更喜欢 box-shadow，特别是当您想为边框设置动画而不引起布局偏移时 。下一节将演示这种情况的示例 。
推荐阅读
- 抖音怎么薅无门槛优惠券？抖音优惠券如何设置？
- 钉钉企业健康码如何设置
- 数码知识：微信来电提醒功能怎么设置设置来电提醒教程
- 不同电脑品牌进入bios的快捷键 联想超极本u410怎么进bios设置
- 开启ipad护眼模式的最佳方式 ipad护眼模式在哪里设置
- ios14画中画在哪 ios14画中画在哪设置
- macbook怎么恢复出厂设置 macbook恢复出厂设置的方法
- 电脑lp地址怎么设置 如何设置电脑lp地址
- 火荧苹果手机怎么设置 火荧苹果手机设置步骤
- 苹果呼叫转移设置不成功 苹果手机怎么设置呼叫转移