在本文中，我将解释边框轮廓框阴影之间的区别，我们还将讨论何时可以使用其中一个。CSS盒模型回顾这三种边框方法之间的一个主要区别在于它们放置在元素上的位置以及它们如何影响元素的尺寸，这是一种由CSS盒模型控制的行为。border是元素的边框，在它的padding和margin之间，它的宽度会影响计算出的元素大小。outline紧挨着但在border之外，重叠box-shadow和margin，但不影响元素的大小。默认情况下，box-shadow从边框边缘向外延伸，覆盖定义方向的空间量，而不影响元素的大小。border语法和用法自网络早期以来，边框一直是一种设计标准。与我们将介绍的其他两种方法相比，一个重要的区别是，默认情况下，边框包含在元素的计算大小中。即使您设置了box-sizing:border-box，边框仍然会计算在内。Border最基本的语法定义了边框的宽度和样式：border:3pxsolid;如果未定义，默认颜色为currentColor，这意味着它将使用级联中最接近的颜色定义。但是border有更多的样式可以选择，如果你愿意，你可以用border-style为每一边定义不同的样式。什么时候使用边框？当元素的尺寸允许进行样式计算时，边框是一个可靠的选择（双关语），并且默认样式为设计提供了很大的灵活性。outline语法和用法对于outline，使其可见的唯一必需属性是提供样式，因为默认值为none：outline:solid;和border一样，它会通过currentColor获取颜色，默认宽度为medium。大纲的典型用途是通过本机浏览器样式将焦点置于:focus元素，例如链接和按钮。除非您可以提供符合WCAGSuccessCriterion2.4.7FocusVisible的自定义:focus样式，否则出于可访问性目的，应允许出现此特定应用程序。出于设计目的，outline的一般问题是它不能从任何border-radius样式继承曲线。什么时候使用大纲？当您不想影响元素的大小时并且不需要它来遵守边框半径时，您可以使用轮廓。box-shadow语法和用法box-shadow最少需要的属性是x和y轴的值以及颜色：box-shadow:5px8pxblack;你可以选择添加第三个参数blur来创建模糊，第四个参数spread来添加模糊漫射度。要使用它来创建边框，我们将x轴和y轴的值和blur设置为0，然后将spread设置为正数。框阴影：0003pxblue；这将在元素周围创建边框外观，甚至遵循应用的border-radius：何时使用box-shadow？你可能更喜欢box-shadow，特别是如果你想在不导致布局移动的情况下为边框设置动画。下一节将演示这种情况的示例。由于box-shadow可以分层，因此它是学习增强布局的全方位好工具。但是，它无法完全模仿border和outline提供的某些样式。将它们放在一起下面是一些您可能想改用边框的真实情况。按钮边框在设计有边框和无边框按钮以及它们排列的场景时，逼真的边框成为一个常见问题。一个典型的解决方案通常是将无边框按钮的大小增加到等于border-width的大小利用我们的新知识，另一种解决方案是将box-shadow与inset关键字一起使用以直观地放置伪边框在里面的按钮上。请注意，您的填充必须大于border-width以防止文本内容重叠。此外，也许您想在:hover或:focus上添加边框。使用真正的边框，您会从布局转换中获得不希望的视觉跳跃，因为边框会短暂地增加这些状态的大小。在这种情况下，我们可以使用box-shadow创建一个假边框，这样它就不会增加实际尺寸，我们也可以使用transition为其设置动画。以下是上述示例的简化代码：button{transition:box-shadow180msease-in;}button:hover{box-shadow:0003pxtomato;}确保可见焦点对于可访问性，您可能不知道的一种情况是Windows高对比度模式(WHCM)用户。在这种模式下，您提供的颜色被剥离成一个减少的高对比度调色板，并不是所有的CSS属性都是允许的，包括box-shadow。一个实际效果是，如果您从:focus中删除轮廓并改用box-shadow，WHCM的用户将不再获得可见焦点。要消除这种负面影响，可以在:focus上应用透明轮廓：button:focus{outline:2pxsolidtransparent;}outline和box-shadow的陷阱因为outline和box-shadow在盒模型的边框之外，你可能会遇到的一个后果是使它们消失在视口边缘以下。因此，如果您希望元素保持可见，您可能需要为元素添加边距或为文本添加填充作为对策。它们的位置也意味着它们可以用overflow:hidden或使用像clip-path这样的属性来剪裁。额外提示：渐变边框正如所承诺的，这里有一个额外的提示-我们已经讨论过的方法-只有边框可以做到。一个经常被遗忘的与边框相关的属性是border-image，当尝试将其用于实际图像时，其语法可能有点奇怪。但它有一个隐藏的特性——由于CSS渐变在技术上是图像，它也可以创建渐变边框：这需要定义一个规则的边框宽度和样式（尽管它只作为一个实体出现，而不管样式值），然后是边框——图像属性，它可以使用添加的渐变语法。梯度后面的数字是切片值，对于我们的梯度，我们可以简单地使用1来基本上不改变梯度的大小/失真。div{border:10pxsolid;/*simplifiedfrompreviewimage*/border-image:linear-gradient(toright,purple,pink)1;}如果只在一侧放边框，必须先将其他边框设置为零，否则有些浏览器仍然为所有边框添加边框。div{border-style:solid;border-width:0;border-left-width:3px;/*border-image*/}的缺点是这些边框不遵循border-radius。
