我正在学习使用带有边框和半径的逻辑CSS属性。在元素的特定角的某个半径之后,顶部和底部边框的颜色将更改为左边框和右边框。
我尝试使用逻辑属性(块/内联/开始/结束)以及物理属性(上/下/左/右);如果我们更改元素的border-end-end-radius或border-bottom-right-radius小于32.3px,则顶部和底部边框的颜色从#012345更改为#f00 (与左边框和右边框相同)。
.border {
width: 300px;
height: 300px;
border-block: solid 20px #012345;
border-inline: solid 30px #f00;
border-start-start-radius: 24px;
border-start-end-radius: 50%;
border-end-start-radius: 100%;
border-end-end-radius: 32.3px; /* decrease this value to reproduce the error */
}
.border2 {
width: 300px;
height: 300px;
border-top: solid 20px #012345;
border-bottom: solid 20px #012345;
border-left: solid 30px #f00;
border-right: solid 30px #f00;
border-top-left-radius: 24px;
border-top-right-radius: 50%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 32.3px; /* decrease this value to reproduce the error */
}<div class="border">border logical</div>
<div class="border2">border physical</div>
为什么会发生这种不一致呢?如何将右下角的半径设置为小于极限值?
注意:我观察到这个错误并没有出现在Firefox上。它显示在基于铬的浏览器(Chrome,MS MS).
https://stackoverflow.com/questions/73476984
复制相似问题