具有背景色的透明边框 [英] Transparent border with background color

问题描述

这很奇怪.

这有效:

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

但是当我将其与背景色一起使用时，边框现在是一条实心黑线.

But when I use it together with background color, then border is now a solid black line.

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

我想念什么吗?

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

推荐答案

您遇到的行为是元素的背景通过透明边框显示.如果要防止这种情况并将背景剪裁到边框内，则可以使用:

The behaviour you are experiencing is that the background of the element appears through the transparent border. If you want to prevent this and clip the background inside the border, you can use:

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 的更多信息

More info about background-clip on MDN.

这篇关于具有背景色的透明边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！