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

Question

After the Firefox update the Border Image doesn't show up anymore at all? You might have defined somthing like this:

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

I had to look around for a bit to realize it's a Firefox Problem. First I thought AdBlock might have just blocked it for some reason. It's actually a change Mozilla did to their CSS Interpretation. You now MUST add this property underneath it for it to work:

border-style:solid;

Hope I could help.

Answer 2

As per the specifications, Firefox requires border-image-width to be set.

Just include the above property.

Here, border-style will correct the issue, but to be more logical and related, its better to use border-image-width instead of border-style or border-width sometimes.

Answer 3

Consider adding:

border: 15px solid transparent;

Where 15px is just an example.

Answer 4

添加fill ：

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