less / css属性的奇怪问题

Question

我在属性border-botom-color（CSS方面）中遇到Less（bootstrap）的奇怪问题。

我有一个示例，其中显示活动选项卡（第1部分）的底线：

fiddle 1

我有这个例子，其中没有出现活动标签（第1部分）的底线：

fiddle 2

独特的差异在CSS上，在第5365行，在fisrt示例中是border-bottom-color: transparent;，在第二个示例中是border-bottom-color: #FFF;

我想知道为什么“透明”不起作用但是设置一种颜色（如#FFF）呢？

Answer 1

原因是因为该行正在其他地方生成。所以当你放border-bottom-color:transparent;时，你只是看到了另一条直线。但当你把它变成白色时，你会在它上面画一条新的白线。

fiddle displaying issue

Answer 2

这是因为ul.nav-tabs标记（a标记的父级）具有彩色边框，长灰色水平边框（请参阅jsfiddle1第5328行）。您需要将a边框底部颜色设置为白色以覆盖它的父边框，因此它看起来是透明的。

Answer 3

transparent只是在border属性定义的顶部添加一个完全透明的边框，因此会显示颜色。 #fff显示在边框的顶部，并阻挡了另一种颜色，因此显示了白色。您可以通过单独指定每个边框的颜色来解决问题。