在Chrome中CSS边框图片无法工作

Question

我曾使用CSS的border-image属性来实现菜单栏的某些效果，在Firefox中运行良好，但在Chrome中无法正常工作。

请参见www.imptools.com。有什么解决Chrome问题的方法吗？

CSS

nav.mainMenu{
width:@16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
    width:100%; height:50px; overflow: visible;
    background: url('../imgs/gun_metal.png');
    border-radius: 15px; box-shadow: 0px 3px 3px @dark;

    li{
        float:left; width: auto;
        margin: 0 20px; overflow: visible;
        height: 80px; position:relative; top:-15px;
        a{
            width: auto; height: auto;
            float:left; padding: 0 15px;
            font-family: @sansSec;
            color:@light;
            line-height: 80px;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 3px 3px 3px @dark;
        }
    }
    li.active, li:hover{
        background: @primary;
        border-radius: 15px 0 15px 15px;
        border-image:url(../imgs/menu_active_bg.png);   
        border-image-width:15px 15px 0px 0px;
        border-image-outset: 0px 15px;
    }
}

- Abel D

Answer 1

试着先设置边框再设置图像，像这样：

border: 50px solid transparent;

我注意到在Safari中这个声明无关紧要，但在Chrome中却很重要。

- Dante

---

是的，Chrome 51在这里修复了一个错误：https://www.chromestatus.com/feature/5542503914668032 - Rick Byers

这个解决了我的问题 - 两年后！谢谢！ - Reverend Bubbles

这实际上在Safari中破坏了border-image。显然，border-color: transparent;优先于border-image-source。但是，在border-image-source之前设置border: 50px solid似乎对Safari和Chrome都有效。 - Jacob Ford

Answer 2

根据Chrome平台状态，Blink将开始要求添加边框样式以绘制边框图像。这一规范要求一直存在，但未被执行。为了不受此更改的影响，在使用border-image时添加'border-style: solid'等内容。因此需要添加：

border-style: solid;

应该可以解决你的问题。

- qwazix

Answer 3

li.active, li:hover{
    background: @primary;
    border-radius: 15px 0 15px 15px;
    -webkit-border-radius: 15px 0 15px 15px;
    -moz-border-radius: 15px 0 15px 15px;
    -khtml-border-radius: 15px 0 15px 15px;
    border-image:url(../imgs/menu_active_bg.png);   
    -webkit-border-image:url(../imgs/menu_active_bg.png);   
    -moz-border-image:url(../imgs/menu_active_bg.png);   
    -khtml-border-image:url(../imgs/menu_active_bg.png);   
    border-image-width:15px 15px 0px 0px;
    -webkit-border-image-width:15px 15px 0px 0px;
    -moz-border-image-width:15px 15px 0px 0px;
    -khtml-border-image-width:15px 15px 0px 0px;
    border-image-outset: 0px 15px;
    -webkit-border-image-outset: 0px 15px;
    -moz-border-image-outset: 0px 15px;
    -khtml-border-image-outset: 0px 15px;
}

- mstrthealias

---

这个 WebKit 只适用于 border-radius。但我需要边框图像呢。看一下火狐和谷歌的菜单区别。 - Abel D

看起来“-webkit-border-image”也可能存在，我已经将其添加到答案中。 - mstrthealias

尝试添加“-webkit-appearance: none;” - mstrthealias

-webkit-border-image-width: 和 -webkit-border-image-outset: 在 Chrome 中无法识别。 - Abel D

请看我添加的图片，这就是我需要的样子。 - Abel D

Answer 4

Try it like below.

li.active, li:hover{
background: @primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}

- Suresh Ponnukalai

---

同样的结果，没有改变。 - Abel D

我通过 Chrome 开发者工具检查了你的网站，显示正常。不确定你是在哪里进行检查。 - Suresh Ponnukalai

我正在本地检查它。我会再试一次。 - Abel D

请看我添加的图片，这就是我需要的样子。 - Abel D