如何解决Safari中border-bottom+复杂border-radius的渲染伪影问题？

我之前也碰到过Safari对非对称复杂border-radius渲染不友好的情况，尤其是给单一边框加特殊圆角的时候，很容易出现奇怪的溢出伪影。咱们来试试这几个靠谱的解决方案：

方法1：用伪元素模拟下划线（最推荐） #

直接避开border本身的渲染bug，用伪元素来实现手写风格的下划线，Safari对伪元素的背景圆角支持更稳定：

input {
  border: none;
  position: relative;
  padding-bottom: 2px; /* 给下划线留出空间 */
  background-color: transparent; /* 确保不遮挡伪元素 */
}

input::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 130px 50px/4px 2px;
  background-color: currentColor; /* 继承输入框文字颜色，方便统一修改 */
}

这个方法不仅能解决伪影问题，还能更灵活地控制下划线的位置、宽度甚至动画效果。

方法2：用内阴影遮挡伪影（快速hack方案） #

如果不想改结构，用内阴影把溢出的伪影盖住，前提是你的输入框背景是纯色的：

input {
  border: none;
  border-bottom: 2px solid;
  border-radius: 130px 50px/4px 2px;
  box-shadow: inset 0 0 0 100px #ffffff; /* 替换成你输入框的实际背景色 */
  -webkit-background-clip: padding-box;
}

内阴影会填满输入框的内部空间，把上方溢出的border伪影完全遮挡住，适合快速临时修复。

方法3：拆分border-radius语法（简化渲染逻辑） #

Safari对CSS3的斜杠式border-radius语法（border-radius: [水平半径]/[垂直半径]）支持不如Chrome稳定，换成单独的边角属性定义，能减少渲染歧义：

input {
  border: none;
  border-bottom: 2px solid;
  border-bottom-left-radius: 130px 4px;
  border-bottom-right-radius: 50px 2px;
}

把复合的border-radius拆成单独的border-bottom-left-radius和border-bottom-right-radius，让Safari的渲染引擎更容易理解圆角规则，从而避免伪影。

你可以根据自己的需求选择其中一种方案，个人最推荐方法1，兼容性和扩展性都最好～

内容的提问来源于stack exchange，提问作者matGalli