Safari浏览器border-radius属性不生效问题求助

问题描述 #

我遇到了border-radius属性的兼容问题，该元素在Chrome、IE中能正常显示圆角，但在最新版Safari中圆角不生效。当前使用的CSS代码如下：

outline: 1px solid #e0e0e0;
background: transparent;
width: 440px;
height: 38px;
padding-left: 16px;
border: transparent;
border-radius: 6px;
font-family: 'Poppins';
font-size: 14px;
font-weight: 400;
color: #04111d;

曾尝试用-webkit-appearance: none;禁用Safari默认样式，但未解决问题。

有效解决方法 #

1. 用border替代outline实现边框 #

Safari对outline的border-radius支持存在问题，outline本质是元素外围的高亮框，默认不遵循圆角规则。把outline替换为border，同时保留透明背景：

border: 1px solid #e0e0e0; /* 替换原来的outline */
background: transparent;
width: 440px;
height: 38px;
padding-left: 16px;
border-radius: 6px;
-webkit-border-radius: 6px; /* 兼容旧版Safari */
font-family: 'Poppins';
font-size: 14px;
font-weight: 400;
color: #04111d;

2. 强制隐藏溢出内容（可选） #

如果替换border后仍有问题，给元素加上overflow: hidden，确保内部内容不会突破圆角：

overflow: hidden;

3. 完善Safari输入框默认样式清除 #

除了-webkit-appearance: none;，可以额外添加以下样式彻底清除默认干扰：

input[type="text"] {
  -webkit-appearance: none;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  box-shadow: none; /* 清除默认阴影 */
}

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