HTML – 透明边框与背景颜色

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

这有效:

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

但是当我将它与背景颜色一起使用时,边框现在是一条坚实的黑色线条.

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

我错过了什么吗?

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

解决方法

您遇到的行为是元素的背景通过透明边框显示.如果要阻止此操作并剪切边框内的背景,可以使用: @H_404_4@background-clip: padding-Box; @H_404_4@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; } @H_404_4@<div id="nav"> <header></header> <nav></nav> </div>

有关更多信息background-clip on MDN.

猜你在找的HTML相关文章