Contorno transparente com a cor de fundo

Isto é estranho.

isto funciona: 

border-right: 1px solid rgba(0,0,0,0.12);
/* renders a gray border */
Mas quando o uso juntamente com a cor de fundo, o contorno é agora uma linha preta sólida.

background-color: #333;
border-right: 1px solid rgba(0,0,0,0.12);
/* renders a black border */
Está a escapar-me alguma coisa ?

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

Author: web-tiki, 2015-02-19
Source

1 answers

O comportamento que está a experimentar é que o fundo do elemento aparece através da fronteira transparente. Se você quiser evitar isso e cortar o fundo dentro do contorno, você pode usar: 
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>

Mais informações sobre o clipe de fundo no MDN.

 37
Author: web-tiki, 2015-02-19 10:36:08