Webkit 中奇怪的边框不透明行为？

发布于 2024-10-09 04:42:25 字数 616 浏览 0 评论 0原文

我一直在测试不透明的边框，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>

您可以在此处进行测试。在 Firefox 中，您将得到预期的结果：一个 10px 的白色内边框，div 周围的不透明度为 50%，但是，至少 Chrome（但我怀疑 Webkit）似乎与边框的边框重叠（不知何故这是有道理的）。我认为这不是故意的，因为它似乎是重叠的！

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

原文

I've been testing with borders with opacity and Webkit seems to be having a weird behavior.

Here's my code

<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>

You can test it here. In Firefox you'll get as expected: a 10px white inner border with 50% opacity around the div, however, at least Chrome (but I suspect Webkit) seems to be overlapping the border's borders (somehow that makes sense). And I think it's not intented, since it seems to be overlapping itself!

Is this a bug or just an intended feature?

分享到QQ

分享到微博