如何解决Firefox 与 Chromium 上边框/边框半径的不同结果
我使用以下 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>
然后生成您可以在下图中看到的形状:
但在 Chromium 中,它看起来完全不同(更糟):
我尝试使用 -webkit- 属性来解决这个问题,但我不知道如何去做。我意识到制作这些形状的更传统的方法是使用 SVG。我想我可能会改用 SVG(尽管这只是一个想法的快速模型),但很高兴知道如何解决这种差异。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。