两个角的边框半径会导致视觉故障 CSS-解网

问：

故障：

enter image description here

它应该是什么样子的

编辑：显然该栏没有出现在我的示例中，所以我更新了它。StackBlitz 上的最小示例

很抱歉造成混淆，这是我的最小示例，而不是我的项目。

您将在大约 4 秒左右后看到故障。该条只会在左侧渲染一些垂直部分，然后它会出现故障。

现在，如果您在 StackBlitz 中进入 index.css/style.css 并将样式从

.innerBar {
  ...

  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
}

自

.innerBar {
  ...

  border-radius: .25em;
}

它将正确呈现。但是，如果您查看底部的 index.css，我有一个用于栏已满时的类，因为我只想在栏已满时对右侧角进行圆角。

我试过弄乱外部 div（条形图）和内部 div（内条形图或滑块）上的边框半径。这就是我发现原因的原因。

编辑：我尝试放大我的示例，却注意到这样做会删除伪影。在正常缩放下重新开始条形增长后，我可以再次看到它。

它在 Firefox 上可以正确呈现，但在我尝试过的任何 Chrome 浏览器上都无法正确呈现。我需要它在 Chrome 上运行，因为我正在制作一个 Electron 应用程序。

css reactjs 谷歌浏览器 webkit chromium

我们不太可能克隆一个 repo 来遍历整个项目以重现您的问题，然后跟踪相关的 html 元素和 css 以帮助您。您有责任隔离特定的、最小的 html 和 css，以便我们重现您面临的问题。请尽量减少帮助您所需的工作，阅读“如何提问”和“最小可重复示例”指南。

0赞 3/6/2023

@JohnDole 我在 VS Code 中没有看到 -webkit-border-radius 选择器的选项。你是这个意思吗？

0赞 Randy Casburn 3/6/2023

@user21338683 - 将您的最小示例放在 StackBlitz 或其他 REPL 中，并提供指向您的工作示例的链接。

0赞 3/6/2023

很抱歉，我在使用 Chrome 之前曾尝试创建一个 StackBlitz，但它不起作用（仍然没有）。但是我在 Firefox 上做了一个并保留了 Github 存储库，以防 REPL 不起作用。

答：

0赞 Brett Donald 3/6/2023 #1

只需让外部做圆角并隐藏任何溢出物。那么你根本不需要任何圆角！.bar.innerBar

.bar {
  border-radius: .25em;
  overflow: hidden;
}
.innerBar {
  border-radius: 0;   /* this is the default value */
}

两个角的边框半径会导致视觉故障 CSS