这很奇怪.
@H_301_2@这有效：
border-right: 1px solid rgba(0,0.12); /* renders a gray border */@H_301_2@但是当我将它与背景颜色一起使用时,边框现在是一条坚实的黑色线条.
background-color: #333; border-right: 1px solid rgba(0,0.12); /* renders a black border */@H_301_2@我错过了什么吗？ @H_301_2@http://codepen.io/anon/pen/myxpXN
解决方法
您遇到的行为是元素的背景通过透明边框显示.如果要阻止此操作并剪切边框内的背景,可以使用：
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>
@H_301_2@有关更多信息background-clip on MDN.
