透明边框与背景色

Question

透明边框与背景色

31

这很奇怪。

这个有效：

border-right: 1px solid rgba(0,0,0,0.12);
/* renders a gray border */

但当我将它与背景颜色一起使用时，边框就变成了一个黑色的实线。

background-color: #333;
border-right: 1px solid rgba(0,0,0,0.12);
/* renders a black border */

我有所遗漏吗？

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

- Kaya Toast

如果您想要一个灰色边框，那么请使用 rgb 或 hex 颜色代替 rgba。 - Vitorino fernandes

Google Material Design，下面的颜色...建议使用alpha :-) - Kaya Toast

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

您遇到的问题是元素背景透明边框时，背景会穿过边框显示。如果您想要避免这种情况并将背景剪裁在边框内部，请使用以下代码：

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>

在MDN上了解有关background-clip的更多信息。