首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >顶部和底部边框颜色消失在特定的边界半径上。

顶部和底部边框颜色消失在特定的边界半径上。
EN

Stack Overflow用户
提问于 2022-08-24 16:53:07
回答 1查看 92关注 0票数 0

我正在学习使用带有边框和半径的逻辑CSS属性。在元素的特定角的某个半径之后,顶部和底部边框的颜色将更改为左边框和右边框。

我尝试使用逻辑属性(块/内联/开始/结束)以及物理属性(上/下/左/右);如果我们更改元素的border-end-end-radiusborder-bottom-right-radius小于32.3px,则顶部和底部边框的颜色从#012345更改为#f00 (与左边框和右边框相同)。

代码语言:javascript
运行
复制
.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 */
}
代码语言:javascript
运行
复制
<div class="border">border logical</div>
<div class="border2">border physical</div>

为什么会发生这种不一致呢?如何将右下角的半径设置为小于极限值?

注意:我观察到这个错误并没有出现在Firefox上。它显示在基于铬的浏览器(Chrome,MS MS).

验证类似的CodePen游乐场

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73476984

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档