锐客网

  1. 首页 > 睿知 > >

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渐变在技术上是图像 。因此它还可以创建渐变边框：

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

文章插图
文章插图

这需要定义一个规则的边框宽度和样式(尽管它只显示为实体 。而不考虑样式值) 。然后是 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 。

推荐阅读


上一篇：古代将军都穿的威风凛凛的铠甲打仗,不怕被敌方针对吗？

下一篇：中国古代防御力最强的盔甲是什么？