Question

假设我有这个：

.example { 

  background-color: rgba(0, 0, 0, 0.5); 
  border-color: rgba(0, 0, 0, 0.5);

}

背景颜色和边框颜色具有相同的rgba值，但颜色不同，因为边框颜色是在背景颜色之上计算的。

边框颜色的透明度值会使它与背景颜色相匹配吗？这里的数学是什么？

编辑：谢谢大家，使用rgba（0,0,0,0）或透明度就足够了我的第一个例子，但我仍然有问题。（http://jsfiddle.net/CPK7L/2/）。在这种情况下，我需要匹配第一个元素的border-color和第二个元素的border-color。

那么我如何根据第二个元素的alpha值计算第一个元素边界的alpha值？

Answer 1

如果将边框Alpha通道设置为0，它将与背景颜色匹配。这是不对底层颜色进行修改的地方;这是transparent模式。

要计算alpha通道的总和，基本上是：

alpha-channel of border * (1 - alpha-channel of background) + alpha-channel of background

因此边界实际上具有0.5 * (1 - 0.5) + 0.5 = 0.5 * 0.5 + 0.5 = 0.25 + 0.5 = 0.75的alpha通道值。

Answer 2

border-color的透明度（alpha）值为0将使其与背景颜色匹配。请参阅：http://en.wikipedia.org/wiki/RGBA_color_space

.example {
    display: inline-block;
    padding: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 25px solid rgba(0, 0, 0, 0);
}