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 ?
20
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