当前位置 : 主页 > 网页制作 > css >

css – Webkit中奇怪的边框不透明行为?

来源:互联网 收集:自由互联 发布时间:2021-06-13
我一直在测试带有不透明度的边框,而Webkit似乎有一种奇怪的行为. 这是我的代码 stylediv{ position: relative; width: 300px; height: 300px; background: #00f;}span{ position: absolute; top: 0; left: 0; right: 0; bott
我一直在测试带有不透明度的边框,而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>

你可以测试它here.在Firefox中你会得到预期的:一个10px的白色内边框,在div周围有50%的不透明度,但是,至少Chrome(但我怀疑Webkit)似乎与边框的边界重叠(不知何故,这使得感).而且我认为它没有意图,因为它似乎重叠了!

这是一个错误还是一个预期的功能?

Chrome问题列表中的错误(猜猜是什么,无人问津):
http://code.google.com/p/chromium/issues/detail?id=36475&q=transparent%20border%20color&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

看看规范,这确实看起来像一个bug:
http://www.w3.org/TR/css3-background/#box-shadow-samples

这些示例也有一个带alpha的内边框,并显示类似Firefox的行为.

网友评论