HTML – 透明边框与背景颜色

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

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

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

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.12);
}
header {
  height: 4em;
  BACkground-color: #ffffff;
}

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

有关更多信息background-clip on MDN.