met*_*ras 3 css webkit border opacity
我一直在测试带有不透明度的边框,而Webkit似乎有一种奇怪的行为.
这是我的代码
<style>
div{
position: relative;
width: 300px;
height: 300px;
background: #00f;
}
span{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
}
</style>
<div>
<span></span>
</div>
Run Code Online (Sandbox Code Playgroud)
你可以在这里测试一下.在Firefox中你会得到预期的:一个10px的白色内边框,在div周围有50%的不透明度,但是,至少Chrome(但我怀疑Webkit)似乎与边框的边界重叠(不知何故有意义).而且我认为它没有意图,因为它似乎重叠了!
这是一个错误还是一个预期的功能?
Chrome问题列表中的错误(猜猜是什么,无人问津):http://code.google.com/p/chromium/issues/detail?id = 36475&q = transarent = 20border% 20color&cfpec = ID% 20Stars%20Pri%
20Area% 20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS
看一下规范,这确实看起来像一个错误:http:
//www.w3.org/TR/css3-background/#box-shadow-samples
这些示例也有一个带alpha的内边框,并显示类似Firefox的行为.