与背景颜色的透明边界

Question

这很奇怪.

这有效:

border-right: 1px solid rgba(0,0,0,0.12);
/* renders a gray border */

但是当我将它与背景颜色一起使用时,边框现在是一条坚实的黑色线条.

background-color: #333;
border-right: 1px solid rgba(0,0,0,0.12);
/* renders a black border */

我错过了什么吗？

http://codepen.io/anon/pen/myxpXN

Answer 1

您遇到的行为是元素的背景通过透明边框显示.如果要阻止此操作并在边框内剪切背景,可以使用:

background-clip: padding-box;

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background:green;
}
#nav {
  position:relative;
  height: 100%;
  width: 240px;
  background-clip: padding-box;  /** <-- this **/
  background-color: pink;
  border-right: 10px solid rgba(0,0,0,0.12);
}
header {
  height: 4em;
  background-color: #ffffff;
}

<div id="nav">
        <header></header>
        <nav></nav>
    </div>

有关MDN 背景剪辑的更多信息