苹果iPhone safari浏览器样式重置修复submit按钮圆角bug

问题描述：
在苹果iPhone的Safari浏览器中，如果使用CSS对button或者input标签来设置圆角边框，那么当这些标签设置为type="submit"时，会出现圆角边框不显示或者显示不正确的问题。这种情况下，我们需要进行样式重置来修复这个问题。

解决方案：

步骤1：为了避免Safari的默认样式，我们需要首先重置样式：

button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

在上述代码中，我们通过将 -webkit-appearance、-moz-appearance和appearance属性设置为none，来消除Safari的默认样式。而 border-radius 则设置为0，以防止其影响后面的样式设置。

步骤2：使用CSS样式来实现圆角边框：

button,
input[type="button"],
input[type="submit"] {
    border-radius: 10px;
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
    padding: 5px 10px;
}

在上述代码中，我们通过给 border-radius 设置一个像素值，来实现圆角边框。同时，我们还可以根据需要设置边框、背景色、文字颜色和内边距等样式属性。

示例说明1：

HTML 代码：

<form>
  <input type="submit" value="提交">
</form>

CSS 代码：

button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

input[type="submit"] {
    border-radius: 10px;
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
    padding: 5px 10px;
}

在上述示例中，我们首先将 border-radius 设置为0，然后再使用一个独立的样式来给 input[type="submit"] 设置圆角边框。

示例说明2：

HTML 代码：

<form>
  <button type="submit">提交</button>
</form>

CSS 代码：

button,
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

button[type="submit"] {
    border-radius: 10px;
    border: 2px solid #000000;
    background-color: #ffffff;
    color: #000000;
    padding: 5px 10px;
}

在上述示例中，我们使用 button[type="submit"] 选择器来给 button 设置圆角边框。其他样式设置与示例1相同。

通过以上两个示例，我们展示了如何在Safari浏览器中修复圆角边框不显示或者显示不正确的问题，以及如何使用CSS样式来实现圆角边框。