这个问题我之前也碰到过，根源在于iOS上的所有浏览器（包括Chrome）都必须使用WebKit内核，而WebKit会给表单控件（比如你的<input type="submit">按钮）套上一套系统默认样式，其中就自带了圆角效果。更关键的是，这些默认样式的优先级有时候会压过你自定义的CSS，导致你设置的border-radius不生效。

另外，WebKit还有个专门控制元素外观的属性-webkit-appearance，按钮的默认值会启用系统原生按钮样式，这也是圆角顽固存在的原因之一。

具体解决方法： #

• 先给按钮添加-webkit-appearance: none;和标准的appearance: none;，彻底禁用系统默认的原生外观
• 再重新定义你的圆角和其他样式，确保自定义规则能正常生效

修改后的完整CSS代码如下：

.header__form-submit .button {
  background: #3371E3;
  border-radius: 0 5px 5px 0;
  /* 重置系统默认外观，这一步是关键 */
  -webkit-appearance: none;
  appearance: none;
  /* 可选：重置默认边框，避免残留的系统边框干扰 */
  border: none;
}

@media screen and (max-width: 767px) {
  .header__form-submit .button {
    width: 100%;
    border-radius: 5px;
  }
}

这样调整后，iOS上的Chrome和Safari就会完全遵循你设置的圆角规则，不会再显示默认的圆角了。如果还有其他样式异常，也可以检查一下有没有其他WebKit专属的默认属性需要重置~

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