css - CSS 边框图像兼容性错误

Question

我border-image在 mozilla 和 safari 中遇到问题，在 chrome 中它可以工作，但在其他浏览器中没有代码：

border-width: 50px;
-moz-border-width: 50px;
-webkit-border-width: 50px;
border-image: url('/img/border.png') 50 50 round;
-webkit-border-image: url('/img/border.png') 50 50 round;
-moz-border-image: url('/img/border.png') 50 50 round;

有没有人有同样的问题？谢谢你的回答

Answer 1

你缺少的是border: 50px solid transparent;

演示

<div>Demo</div>

div {
    border:50px solid transparent;
    border-image: url('YOUR_URL') 50 50 round;
    -webkit-border-image: url('YOUR_URL') 50 50 round;
    -moz-border-image: url('YOUR_URL') 50 50 round;
}

或者在你的 CSS 声明中添加这些

border-color: transparent;
border-style: solid;

注意：您不必使用proprietary属性border-width