与背景颜色的透明边界

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;

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有关MDN上background-clip的更多信息。