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