具有背景色的透明边框

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