css加边框代码教你怎么设置div边框样式 _经验知识

在本文中。我将介绍以下两者之间的区别：
border
outline
box-shadow
我们还将讨论您何时可以使用另一种方法。
css Box模型复习这三种边框方法之间的一个关键区别是它们放置在元素的位置以及它们如何影响元素的维度。这种行为是由CSS box模型控制的。

文章插图
文章插图
border 正是元素的边界。位于其padding和margin之间。它的宽度将影响计算出的元素尺寸。
outline 在边框旁边但在边框之外。与 box-shadow 和 margin 重叠。但不影响元素的尺寸。
默认情况下。box-shadow 从边框的边缘向外延伸。覆盖定义方向的空间量。也不会影响元素的尺寸。
border 语法和用法自网络诞生之初。边框就已经成为设计的标准。
与我们将要介绍的其他两种方法相比。一个重要的区别是。默认情况下。border 包含在元素的计算尺寸中。即使您设置 box-sizing：border-box 。border 仍然会计入计算中。
Border 最基本的语法定义了边框的宽度和样式：
border:3pxsolid;如果未定义则默认颜色为 currentColor 。这意味着它将在级联中使用最接近的颜色定义。
但 border 有更多的样式可供选择。如果你愿意。使用 border-style 你可以为每一面定义不同的样式。
何时使用 border
当元素的尺寸允许样式计算时。border 是一个可靠的选择(双关语) 。默认样式给了设计很大的灵活性。
outline 语法和用法对于outline 。使其可见的唯一必需属性是提供一种样式。因为默认值为 none：
outline:solid;和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:5px8pxblack;可以选择添加第三个参数 blur 来制造模糊。第四个参数 spread 来添加模糊扩散程度。
要使用它来创建边框。我们将 x 轴和 y 轴的值以及 blur 都设置为 0。然后为spread设置一个正数。
box-shadow:0003pxblue;这将在元素周围创建边框的外观。甚至可以遵循所应用的 border-radius：

文章插图
文章插图
何时使用box-shadow
您可能更喜欢 box-shadow 。特别是当您想为边框设置动画而不引起布局偏移时。下一节将演示这种情况的示例。
而且由于 box-shadow可以分层。所以它是一个全能的好工具。要了解它来增强你的布局。
但是。它将无法完全模仿 border 和 outline 提供的某些样式。
放在一起以下是一些可能需要使用 border 替代的实际情况。
按钮边框当为有边框和无边框的按钮提供样式时。真实的 border 成为一个常见的问题。以及它们排列在一起的场景。