带背景色的透明边框

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 上 background-clip 的更多信息。

带背景色的透明边框

Transparent border with background color

html

css

border