gpt4 book ai didi

css - 透明边框颜色无法按预期工作

转载 作者:行者123 更新时间:2023-12-02 03:02:39 25 4
gpt4 key购买 nike

<分区>

由于某些原因,border-color: transparent; 如果与任何 background-color 配对,实际上并不是透明的。我在下面做了一个小演示。您可以清楚地看到 div#two 的蓝色背景色及其在第一个代码段中的红色边框,即使 div#one 位于其上方。这是预期的,因为 div#one 的边框和背景是透明的。

但是在第二个片段中,即使边框根本没有改变,只有 div#one 的背景颜色发生了变化,你也看不到红色边框了!这是为什么? div#two 的边框不应该保持可见,因为 div#one 的边框仍然是完全透明的吗?

div {
width: 100px;
height: 50px;
border: 5px solid;
}

#one {
border-color: transparent;
background-color: transparent;

position: absolute;
}

#two {
border-color: firebrick;
background-color: lightblue;
}
<div id="one"></div>
<div id="two"></div>

div {
width: 100px;
height: 50px;
border: 5px solid;
}

#one {
border-color: transparent;
background-color: #ccc; /* <--- changed */

position: absolute;
}

#two {
border-color: firebrick;
background-color: lightblue;
}
<div id="one"></div>
<div id="two"></div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com