Firefox 与 Chromium 上边框/边框半径的不同结果

编程问答 2022-06-02

问题描述

我使用以下 CSS 生成非常简单的二维河流形状：

.river-left {
  width: 100px;
  height: 50px;
  border: solid 20px rgb(0,140,255);
  border-color: rgb(0,255) transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(270deg);
  align-self:center;
  margin-top: 19px;
}

.river-right {
  width: 100px;
  height: 50px;
  border: solid 20px rgb(0,255) transparent transparent transparent;
  border-radius: 50%/100% 100% 0 0;
  transform: rotate(90deg);
  align-self: center;
  margin-top: 19px;
}
<div class="river-left"></div><div class="river-right"></div>

在 Firefox 中，以下 HTML <div class="river-left"></div><div class="river-right"></div> 然后生成您可以在下图中看到的形状：

enter image description here

但在 Chromium 中，它看起来完全不同（更糟）：

enter image description here

我尝试使用 -webkit- 属性来解决这个问题，但我不知道如何去做。我意识到制作这些形状的更传统的方法是使用 SVG。我想我可能会改用 SVG（尽管这只是一个想法的快速模型），但很高兴知道如何解决这种差异。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

borderborder-radiushtml