Question

我正在重新研究W3Schools中的CSS概念。

我引用了这个有用网站上的内容：

边框 - 围绕填充和内容的边框。边框受到框背景颜色的影响

http://www.w3schools.com/css/css_boxmodel.asp

但如果我没有为我的边框指定颜色（我正在测试表格），则不会显示。

那么W3Schools试图说什么呢？

Answer 1

但如果我没有为我的边框指定颜色（我正在测试表格），则不会显示。

如果您没有指定边框，则无法绘制边框。我不明白你引用的陈述是如何相关的。

无论如何，关于手边的实际问题......

元素的边框颜色是否受其背景颜色影响？

只有这样：

边框不是完全固定和/或不透明的，
background-clip不是border-box（默认情况下）

如果它是带有透视区域的边框图像，或者是半透明颜色（例如rgba()或hsla()颜色），那么背景（如果有的话）将在边框下方可见。

如果background-clip为padding-box或content-box，则无论边框是图像还是半透明色，边框都不会与背景重叠。

这些是您必须努力实现的不常见场景，因此我不知道为什么W3Schools会指出这一点。我并不感到惊讶的是，W3Schools 没有打扰为什么这是一个例子。为了记录，该网站没有你想象的那么好;请参阅有关原因的问题的评论。

Answer 2

如果您的边框颜色带有Alpha值或透明颜色或不是实心颜色，则框的颜色会闪烁。
http://jsfiddle.net/HerrSerker/WrZRL/

div {
    background-color: black;
    border: 10px solid rgba(255,255,0,0.5);
    width: 100px;
    height: 100px;
    margin: 10px;
}
div.d2 {
    background-color: red;
}

Answer 3

忽视透明度......

在某些旧浏览器中，边框颜色（如果未明确设置）可能会受到某些border-style s（凹槽，脊，插入，开始等）的背景颜色的影响。例如，旧版本的Chrome在斜角边框样式的角落background-color上显示了一种中间色（奇怪） - 尽管这很难被注意到并且与border-color被设置无关。（这可能是一个错误，并已在以后的版本中修复。）

当border-style设置为“double”时，边框内会显示background-color。

然而，我觉得w3schools错了...

边框受到框的背景颜色的影响。

当未明确设置border-color时，元素的颜色确实会影响边框的颜色。但这取决于浏览器，因此不可靠。在Chrome中，如果未明确设置，border-color将与color相同，分别为点线，虚线，实线和双border-style。

是否显示边框主要取决于border-style（“无”或“隐藏”）和border-width，通常不是border-color - 除非边框颜色匹配背景颜色，在这种情况下，看起来就像没有边框一样。

Answer 4

取决于您选择的组合，如果边框更亮，您会看到两者如果身体颜色更亮更明亮的边框变得不那么明显，那么在我的视图中选择更亮的边框可能会与我的意见不同。

Answer 5

如果边框颜色和背景颜色相同，则边框将不可见。

元素的边框颜色是否受其背景颜色的影响？

5 个答案: