如何让CSS border-image在Safari浏览器中正常工作？

问题根源 #

1. fill关键词兼容性问题：Safari（尤其是旧版本）不支持border-image的fill属性，这个属性用于让边框图片填充元素背景区域，但Safari会忽略该属性，导致渲染异常。
2. 前缀属性与标准属性不一致：你写的-webkit-border-image未包含fill，而Safari仍依赖这个前缀属性解析样式，即使标准属性写了fill也无法生效。
3. 切片值与图片尺寸匹配问题：border-image-slice的500是相对于边框图片本身的像素值，若你的border.png实际尺寸对应的切片区域不是500px，会直接导致渲染错乱。

修复后的CSS代码 #

如果不需要边框图片填充元素背景，可直接移除fill关键词，并统一前缀属性写法：

.border-around-style {
    border-style: solid;
    border-width: 50px;
    border-color: rgba(0, 0, 0, 0.01);
    /* 统一所有前缀属性和标准属性的写法，移除fill */
    -webkit-border-image: url("assets/img/site-images/home/border.png") 500 round;
    -moz-border-image: url("assets/img/site-images/home/border.png") 500 round;
    -o-border-image: url("assets/img/site-images/home/border.png") 500 round;
    border-image: url("assets/img/site-images/home/border.png") 500 round;
}

如果需要边框图片填充背景区域，可通过伪元素模拟fill效果：

.border-around-style {
    border-style: solid;
    border-width: 50px;
    border-color: rgba(0, 0, 0, 0.01);
    -webkit-border-image: url("assets/img/site-images/home/border.png") 500 round;
    -moz-border-image: url("assets/img/site-images/home/border.png") 500 round;
    -o-border-image: url("assets/img/site-images/home/border.png") 500 round;
    border-image: url("assets/img/site-images/home/border.png") 500 round;
    /* 开启相对定位，为伪元素提供基准 */
    position: relative;
    /* 确保内容在伪元素上方 */
    z-index: 1;
}

/* 伪元素模拟fill效果 */
.border-around-style::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: url("assets/img/site-images/home/border.png") round;
    z-index: -1;
    /* 避免伪元素干扰交互 */
    pointer-events: none;
}

更可靠的替代方案（伪元素实现图片边框） #

鉴于border-image在Safari的兼容性问题，推荐使用伪元素+背景图片的方式实现，兼容性更稳定：

.border-around-style {
    position: relative;
    /* 内边距对应边框宽度，确保内容不被边框覆盖 */
    padding: 50px;
}

.border-around-style::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 用padding模拟边框宽度，结合box-sizing让背景图片适配 */
    padding: 50px;
    box-sizing: border-box;
    background: url("assets/img/site-images/home/border.png") round;
    z-index: -1;
}

额外检查项 #

• 确认border.png的路径正确，可通过浏览器控制台查看是否有图片加载失败的404错误。
• 核对border-image-slice的500是否与图片实际切片区域匹配，若图片尺寸是1000x1000px，切片500是合理的；若图片更小，需调整切片值。

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