这很奇怪.
@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.