css加边框代码 设置div边框样式
在本文中，我将介绍以下两者的区别:borderoutlinebox-shadow我们还将讨论何时可以使用另一种方法。CSS盒模型审查三种border方法之间的一个关键区别是它们在元素上的位置以及
在本文中，我将介绍以下两者的区别:
borderoutlinebox-shadow
我们还将讨论何时可以使用另一种方法。
CSS盒模型审查三种border方法之间的一个关键区别是它们在元素上的位置以及它们如何影响元素的尺寸。这种行为是由CSS盒子模型控制的。
Border是元素的边界，位于其填充和边距之间，其宽度将影响计算的元素大小。
轮廓在边框旁边但在边框之外，与框阴影和边距重叠，但不影响元素的大小。
默认情况下，框阴影从边框边缘向外延伸，覆盖定义方向的空的量，并且不会影响元素的大小。
边界语法和用法自从网络诞生以来，边框就成了设计的标准。
与我们将介绍的其他两种方法相比，一个重要的区别是，在默认情况下，border包含在元素的计算大小中。即使您设置了“框大小:边框-框”,边框仍会被计算在内。
边框的最基本语法定义了边框的宽度和样式:
border: 3px solid;
如果未定义，默认颜色是currentColor，这意味着它将使用层叠中最接近的颜色定义。
但是border有更多的款式可以选择。如果您愿意，可以使用border-style为每一边定义不同的样式。
何时使用边框
当元素的大小允许样式计算时，Border是一个可靠的选择(双关语)，默认样式给了设计很大的灵活性。
概述语法和用法对于outline，使其可见的唯一必需属性是提供一个样式，因为默认值是none:
outline: solid;
和border一样，它会通过currentColor获取颜色，默认宽度是medium。
outline的典型应用是聚焦:通过原生浏览器风格聚焦元素(如链接和按钮)。
除非你能提供一个符合WCAG成功标准2.4.7 Focus Visible的custom: focus样式，否则这个特定的应用程序应该被允许以可访问性为目的。
出于设计目的，轮廓的常见问题是它不能从任何边界半径样式继承曲线。
何时使用大纲
当您不想影响元素的大小并且不需要它们跟随边框半径时，可以使用轮廓线。
方框阴影语法和用法方框阴影的最低要求属性是x和y轴的值以及颜色:
box-shadow: 5px 8px black;
可以选择添加第三个参数blur来创建模糊，第四个参数spread来添加模糊扩散度。
为了使用它来创建一个边界，我们将X轴和Y轴的值以及模糊设置为0，然后为扩散设置一个正数。
box-shadow: 0 0 0 3px blue;
这将在元素周围创建边框外观，即使遵循应用的边框半径:
何时使用框阴影
您可能更喜欢使用框阴影，尤其是当您希望在不导致布局偏移的情况下动态显示边框时。下一节将演示这种情况的一个例子。
因为盒子阴影可以分层，所以它是一个全能的工具。了解它以改进您的布局。
但是，它将无法完全模仿border和outline提供的一些样式。
放在一起。下面是一些可能需要使用border代替的实际情况。
按钮边框在为有边框和无边框按钮提供样式的时候，真正的边框成为了一个常见的问题，也是它们排列在一起的场景。
典型的解决方案是将无边框按钮的大小增加到边框宽度的大小。
利用我们的新知识，另一个解决方案是使用box-shadow和inset关键字，在按钮内部可视化地放置伪边框。
请注意，您的填充必须大于边框宽度，以防止文本内容重叠。
此外，也许你想添加一个边框:悬停或:焦点。
使用真实的边框，你将会看到布局变化带来的不良视觉跳跃，因为在这些状态下边框会暂时增加尺寸。
在这种情况下，我们可以使用box-shadow创建一个伪边框，这样就不会增加实际大小。此外，我们可以使用过渡来制作动画。
这是上面示例的简化代码:
button { transition: box-shadow 180ms ease-in;}button:hover { box-shadow: 0 0 0 3px tomato;}
确保焦点清晰可见有一种情况你可能不知道，那就是Windows高对比度模式(WHCM)的用户。
在这种模式下，您提供的颜色将被剥离到一个缩小的高对比度调色板中，并且不是所有的CSS属性都被允许，包括框阴影。
一个实际的效果是，如果您删除:focus中的轮廓并用box-shadow替换它，WHCM的用户将不再获得可见的焦点。
为了消除这种负面影响，您可以将透明轮廓应用于:焦点:
button:focus { outline: 2px solid transparent;}
轮廓和方框阴影的陷阱因为轮廓和框阴影位于框模型的边界之外，所以您可能会遇到的一个后果是使它们消失在视口的边缘之下。因此，如果您想保持元素可见，您可能需要为元素添加边距或为主体添加填充作为对策。
它们的位置也意味着它们可以被overflow: hidden或使用clip-path等属性截断。
额外提示:渐变边框正如所承诺的，在我们已经讨论过的方法中，这里有一个额外的技巧，只有border可以做到。
一个经常被遗忘的与边界相关的属性是border-image，当试图将它用于实际的图像时，它的语法可能有点奇怪。
但是它有一个隐藏的功能——由于CSS渐变在技术上是图像，它也可以创建渐变边框:
这需要定义一个常规的边框宽度和样式(尽管它只显示为一个实体，而不考虑样式值)，然后是边框图像属性，它可以使用一个添加的渐变语法。渐变后的数字是切片值。对于我们的渐变，我们可以简单地使用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 */}
缺点是这些边界不符合边界半径。
