iOS设备Border-Radius不生效问题（已用Webkit前缀）

问题根源 #

你的前两个导航按钮本该显示7px圆角，但在iOS Safari里全变成了方形——这不是border-radius没生效，是Safari的outline属性不支持跟随圆角：.btn-effect里的outline:1px solid是方形的，直接盖住了圆角的视觉效果，看起来就像圆角没起作用，而Chrome对outline的渲染会适配圆角，所以桌面端正常。

快速修复方案 #

方案1：用border替代outline（最稳妥） #

把outline换成border，因为border会严格遵守border-radius的设置，完全解决兼容性问题：

.btn-effect {
    border: 1px solid rgba(255, 255, 255, .5); /* 替换原outline */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
    /* 删掉下面三行outline相关代码 */
    /* outline: 1px solid; */
    /* outline-color: rgba(255, 255, 255, .5); */
    /* outline-offset: 0px; */
    text-shadow: none;
    transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 同步修改hover和active状态下的outline属性为border */
.btn-effect:hover {
    border: 1px rgba(255,255,255,.25) solid;
    box-shadow: inset 0 0 15px rgba(221, 176, 213, 0.75), 0 0 15px rgba(221, 176, 213, 0.4);
    /* 删掉outline-color和outline-offset */
}

.btn-effect:active {
    box-shadow: inset 0 0 15px rgb(221, 145, 206), 0 0 15px rgba(221, 176, 213, 0.4);
    /* 删掉outline-color和outline-offset */
}

方案2：保留outline，强制适配圆角 #

如果一定要用outline效果，给带圆角的元素添加-webkit-mask-image，让Safari强制outline跟随圆角：

.border-radius {
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  /* 添加这行 */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

额外检查项 #

• 用Safari开发者工具确认.border-radius的border-radius属性没被其他样式覆盖（比如是否有更高优先级的选择器）
• 给.nav-item加overflow:hidden，避免内部元素溢出圆角：

.nav-item {
  overflow: hidden;
}

修改后在iOS Safari测试，前两个按钮的圆角就能正常显示了。

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