1. 首页
  2. css

CSS如何在元素的三个边上放置边框?

前几天我看到一个关于这个的小对话,我想看看所有不同的方法会很有趣。它们都不是特别棘手的,但是也许你会喜欢一个而不是另一个,因为语法清晰,效率高,或者其他。让我们假设在元素的底部、左侧和右侧(而不是顶部)都要有一个边框。完全扩展它将是这样的:
.three-sides {border-bottom-color: black;border-bottom-style: solid;border-bottom-width: 2px;border-left-color: black;border-left-style: solid;border-left-width: 2px;border-right-color: black;border-right-style: solid;border-right-width: 2px;}去掉一个边
你可以节省一点代码,用速记在所有四个边上声明边界,然后删除你不想要的边:
.three-sides {border: 2px solid black;border-top: 0;}速记宽度>***在这里,您不需要声明边框颜色来显示边框,因为该颜色将继承currentColor!所以这很好:
.three-sides {/* no color declared */border-style: solid;border-width: 0 2px 2px 2px;}
如果你这样做了,你会有红色的边框:
.three-sides {border-color: red;border-style: solid;border-width: 0 2px 2px 2px;}
奇怪,但真实。
如果你想添加显式的颜色,你可以有点混合和匹配速记,所以这很好:
.three-sides {border: solid green;border-width: 2px 0 2px 2px;}

CSS如何在元素的三个边上放置边框? 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%a6%82%e4%bd%95%e5%9c%a8%e5%85%83%e7%b4%a0%e7%9a%84%e4%b8%89%e4%b8%aa%e8%be%b9%e4%b8%8a%e6%94%be%e7%bd%ae%e8%be%b9%e6%a1%86%ef%bc%9f/