Question

我在mozilla和safari中遇到border-image的问题，在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;

Demo

<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属性

CSS边框图像兼容性错误

1 个答案: