代码之家  ›  专栏  ›  技术社区  ›  Juicy

边框图像属性不显示边框

  •  0
  • Juicy  · 技术社区  · 12 年前

    我已经效仿了 W3Schools here

    HTML格式:

    <h2 class="underline_red">Design</h2>
    

    CSS:

    .underline_red {
        border-image: url(../images/underline_red.jpg) 30 30 stretch;
        border: 15px solid transparent;
    }
    

    我还包括了所有的供应商前缀,尽管最新的Chrome对其解释很好。

    我没有收到任何控制台错误,所以我的文件定位和加载没有问题。

    与W3Schools上的示例不同,我没有得到任何边框图像。

    我显然错过了什么

    我注意到W3Schools上的示例不使用像素大小,我尝试添加它们,但无济于事。

    JSFiddle

    1 回复  |  直到 12 年前
        1
  •  1
  •   Dan Piers    12 年前

    翻转样式的顺序:

    .underline_red {
        border: 15px solid transparent;
        border-image: url(http://www.w3schools.com/cssref/border.png) 30 30 round;
    }
    

    jsFiddle Demo