显示具有角半径的 div 的白色像素答案

【问题标题】：White pixels showing for div with corner radius显示具有角半径的 div 的白色像素
【发布时间】：2021-05-12 20:08:19
【问题描述】：

我的网站上有一个表单中有两个输入字段。我将它们设计为只有 bottom-border 并应用了以下其他 css：

input {
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

.loginTextField {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border-bottom: 2px solid white;
    outline: none;
}

在 HTML 中，文本字段如下所示：（另请注意，文本字段后面没有相同大小的 div。）

<input type="email" class="loginTextField" id="loginEmail">

目前，即使只设置了底部边框，Safari 也会以以下方式呈现文本字段 - 请注意顶部角落有那些白色像素：

（在这个上更容易看到）

另一方面，Chrome 会根据需要呈现它们：

我知道，以前有人问过similar question。但是，建议的解决方案都不适合我。

我已经尝试过这样做：

border: 0 solid transparent;
border-bottom: 2px solid white;

和：

border-top: 0 solid transparent;
border-right: 0 solid transparent;
border-bottom: 2px solid white;

...运气不好。

不过，我确实注意到，将 bottom-border-color 更改为例如绿色，也会将这些额外的像素更改为该颜色。

看看这个工作JSFiddle example。

有没有办法让 Safari 不渲染那些白色像素？

【问题讨论】：

一种 hacky 方式 - 但不是使用透明，您可以将其设置为您正在使用的任何背景颜色？
那就是background: #35425A。不过，这并没有改变任何事情。
它仍然显示白色边框？奇怪！
尝试使用 box-sizing 属性。
@ChandraShekhar，不幸的是，box-sizing 不会以任何方式影响它。还有什么想法吗？你有机会看看小提琴吗？

标签： html css border rounded-corners

【解决方案1】：

我在父元素中添加了box-shadow: inset 10px 10px #000;

之前：

之后：

【讨论】：

从屏幕截图看来，白角仍然存在，只是不太明显......