问题标签 [border-radius]

你好，

我正在做一些 HTML 和 CSS 工作，我遇到了这个关于 html 输入标签的问题，这个问题经常出现。我使用 CSS 特性 'border-radius' 来获得一个圆形输入框。尽管如此，每当我选择此白框时，请参阅附图以获取详细信息。我怎样才能阻止这种情况发生？

谢谢

这就是我想要的设计： 圆角设计

这就是我到目前为止所实现的： 用块状片段实现

如何实现对角的圆角效果，如预期设计所示？现在，每个段都是它们自己的 HTML 元素，并包含在一个具有圆角效果的 HTML 块中，但它位于矩形段的下方。是否可以进行某种剪辑，以便可以将段下的 HTML 元素的形状叠加到段上，以便它们在正确的位置具有圆形颜色（我不希望颜色之间的中断是圆角也）？

顺便说一句，这是有角度的。

铬合金

火狐

我可以做些什么来更改我的代码，使其在 Firefox 中具有 Chrome 外观？我正在使用伪元素来模仿重叠表行的外观。如果可以在不使用伪元素的情况下实现这种外观，那么这也是一个适合我的解决方案。

可能在 div 边缘的抗锯齿方面遇到了麻烦；在圆角附近可以看到一条细白线：

任何想法，如何解决？

这里的 Codepen 示例：https ://codepen.io/nikita-schetko/pen/eYdzQWx

如果我在表格标签上有边框折叠属性，我的边框半径不会显示。我需要打开border-radius 属性，如果我删除border-collapse 属性，我不会得到我想要的外观，即灰色部分会到达桌子的最边缘。

解决这个问题的方法是什么？它的原因是什么？

提前致谢

非常

我希望有人能帮助我。我找到了很多关于边界半径信息的页面，但我不需要这种边界。可以用css吗？

提前致谢。

我无法将我的 ul 列表的一个角四舍五入。具体来说最后一个。现在，底部的所有角都是圆形的。这是我的代码php代码：

和我的CSS：

我在 Stack Overflow 和其他地方看到了一些解决方案，但它并不能真正处理动态生成的列表。

我正在开发的网站上有一堆卡片。它们显示从数据库中提取的一些内容，并在单击时链接到该特定卡片的更详细内容页面。在所有浏览器和屏幕上，一切都运行良好，除了卡片在 iOS 上变成了圆形，并且应用了渐变作为背景色。这些卡片的边框半径设置为 15 像素，但表现得好像边框半径为 50%。（网站上其他地方还有其他具有相同边框半径的元素，但它们不是按钮并且显示正常），

我看过其他帖子并了解这可能是 iOS 应用的默认样式的问题。我通过设置 -webkit-appearance: none; 尝试了他们的解决方案 在按钮上和全局上，但这并不能解决问题。我也尝试设置 -webkit-border-radius: 15px; 按钮本身，无济于事。

任何想法可能导致问题以及如何覆盖它？此外，有没有办法从 iOS 上的 chrome 内部访问 devtools 以查看发生了什么？

这是按钮的 css 样式（还有一些媒体查询会在给定的断点处更改宽度和高度，但我已省略）。

编辑：演示链接已删除

为了说明，这里有两张显示差异的图像：

例如：正确的按钮样式。

例如：iOS 上的样子。

我正在使用以下 CSS 生成非常简单的 2d 河流形状：

在 Firefox 中，下面的 HTML<div class="river-left"></div><div class="river-right"></div>会生成如下图所示的形状：

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

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

我正在使用此类设置圆形.rounded边框

大多数时候边框看起来不错

但在小元素上，它看起来并不是很好。

有什么办法，使用我可以设置边界半径的scss，以便在更宽的元素上，它会是1rem但在更小的元素上，它会是0.5rem什么，这样搜索栏看起来差不多，但正方形看起来更像