修复iPhone的safari浏览器上submit按钮圆角bug

修复iPhone的Safari浏览器上Submit按钮圆角Bug的完整攻略，需要遵循以下步骤：

1. 确认问题

首先，需要确定问题是什么。在iPhone的Safari浏览器上，当一个表单中的Submit按钮设置了圆角，但未设置背景时，会出现边框的圆角与按钮内容的圆角不一致的情况。

2. 理解问题

这个问题是由于Safari浏览器对CSS属性的解析方式导致的。在Safari浏览器上，border-radius属性会使得元素的边框和内容都被设置圆角，而不仅仅是边框。所以，在提交按钮上设置了圆角属性，Safari浏览器就会自动将提交按钮的内容也设置为圆角。如果这时提交按钮上没有设置背景色，那么边框圆角和按钮内容圆角就不会完全匹配，从而导致这个问题的发生。

3. 解决问题

有两种方法可以解决这个问题：

(1) 设置按钮的背景色，使得按钮内容和边框颜色相同，从而达到完美匹配

button {
    border-radius: 10px;
    background-color: #387ef5;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
}

(2) 在按钮的伪类中重新设置一下元素的边框圆角

button {
    border-radius: 10px;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
}

button:focus {
    outline: none;
}

button::-webkit-input-placeholder {
    color: #fff;
}

button::-moz-placeholder {
    color: #fff;
}

button:-ms-input-placeholder {
    color: #fff;
}

button:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    border: 1px solid #387ef5;
    box-sizing: border-box;
}

代码中，我们首先设置了Submit按钮的border-radius属性为10px，并且在按钮的伪类中重新设置了元素的边框圆角，使得边框圆角和按钮内容圆角完美匹配，并且在按钮的伪类中添加了:after伪元素，来实现按钮的边框样式。

4. 测试

最后，进行测试，确认Submit按钮边框圆角和按钮内容圆角匹配且样式正常。

示例代码如下：https://codepen.io/anon/pen/Ldjqgb