CSS - 新的Firefox版本不再显示Border-Image

Question

Firefox更新后，边框图像根本不会显示？ 你可能已经定义了这样的东西：

border-width:30px;
-moz-border-image: url('border.png') 64 64 64 64 stretch stretch;
   -webkit-border-image: url('border.png') 64 64 64 64 stretch stretch;
   -o-border-image: url('border.png') 64 64 64 64 stretch stretch;

Answer 1

我不得不环顾四周才意识到这是一个Firefox问题。首先我认为AdBlock可能因为某些原因而刚刚阻止了它。这实际上是Mozilla对CSS解释所做的改变。你现在必须在它下面添加这个属性才能工作：

border-style:solid;

希望我能提供帮助。

Answer 2

根据规范，Firefox需要设置border-image-width。

只需包含上述属性。

在这里，border-style会更正问题，但为了更合乎逻辑和相关，最好有时使用border-image-width代替border-style或border-width。

Answer 3

考虑添加：

border: 15px solid transparent;

15px只是一个例子。

Answer 4

添加fill：

-webkit-border-image: url(<%= asset_path('wxskvip_head_frame.png') %>) 6 fill stretch;