css加边框代码教你怎么设置div边框样式( 二 )

button{transition:box-shadow180msease-in;}button:hover{box-shadow:0003pxtomato;}确保可见焦点对于可访问性。您可能不知道的一种情况是Windows高对比度模式（WHCM）的用户。
在这种模式下。你提供的颜色会被剥离成一个缩小的高对比度调色板。并非所有CSS属性都是允许的。包括 box-shadow 。
一个实际的影响是。如果你在 :focus 时去掉了 outline 。而用 box-shadow 代替。WHCM的用户将不再获得可见的焦点。
要消除这种负面影响。您可以在 :focus 上应用透明的 outline：
button:focus{outline:2pxsolidtransparent;}outline和box-shadow的陷阱因为outline和box-shadow位于盒模型的边框之外。你可能会遇到的一个后果是让它们在视口的边缘下消失。所以。如果你想让元素保持可见。你可能需要给元素添加 margin 或者给正文添加 padding 作为对策。
它们的位置也意味着它们可以被 overflow: hidden 或使用 clip-path 等属性剪掉。
额外提示：渐变边框正如承诺的那样。这里有一个额外的提示——在我们已经讨论过的方法中——只有 border 可以做到。
一个经常被遗忘的 border 相关属性是 border-image 。当试图将它用于实际的图像时。其语法可能有点奇怪。
【css加边框代码教你怎么设置div边框样式】但是它具有隐藏的功能——由于CSS渐变在技术上是图像。因此它还可以创建渐变边框：

文章插图
文章插图

这需要定义一个规则的边框宽度和样式(尽管它只显示为实体。而不考虑样式值) 。然后是 border-image 属性。它可以使用一个添加的渐变语法。在渐变之后的数字是 slice 值。对于我们的渐变。我们可以简单地使用 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 。

css加边框代码 教你怎么设置div边框样式( 二 )

css加边框代码教你怎么设置div边框样式( 二 )