HTML – 透明边框与背景颜色

前端之家收集整理的这篇文章主要介绍了HTML – 透明边框与背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这很奇怪. @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.

猜你在找的HTML相关文章