移动端CSS适配时，border-image属性常出现意想不到的显示问题。本文针对iOS设备上border-image显示异常的情况进行分析和解决。
问题：在电脑端，使用border-image成功创建了线性渐变边框元素，但在iOS手机端，边框却显示为完整的矩形，而非预期的单边边框。 以下代码为例：
#demo {
margin-left: 3rem;
width: 100px;
height: 100px;
border-left: 3px solid;
border-image: linear-gradient(red, blue) 1;
}
电脑端显示正常，仅左侧显示渐变边框。但iOS手机端，整个元素都被渐变边框包围。
原因：问题根源在于border属性的默认值。即使只设置了border-left，其他三个方向的border属性仍具有默认值：border-width: medium; border-style: none; border-color: transparent;。某些iOS浏览器中，border-image会影响这些默认值，导致渲染异常。
解决方案：通过显式设置border: 0;清除默认值的影响，即可解决此问题。修改后的代码如下：
#demo {
margin-left: 3rem;
width: 100px;
height: 100px;
border: 0; /* 关键修改：清除默认border属性 */
border-left: 3px solid;
border-image: linear-gradient(red, blue) 1;
}
添加border: 0;后，仅应用border-left指定的样式，从而在iOS手机端正确显示左侧渐变边框，有效解决了border-image的兼容性问题。
