没有报告CSS错误，但border-image-source和border-image-slice不会生成任何边框图像

Question

我正在练习并尝试显示边框图像。我创建了图片，它可以是found here。

我正在运行64位的Firefox 60.0.1。

我检查了开发者工具中的网络标签，图片加载就好了。我的@supports at-rule 也可以正常使用。而且没有CSS错误。

但是，我根本看不到边框图像。

div {
        width: 250px;
        height: 120px;
        background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9));

        font-size: 2em;
        font-family: Geneva;

        margin: 100px auto 0px auto;
        padding: 10px;
    }

    @supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) {
        div {
            border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png);
            border-image-slice: 30%;
            border-image-repeat: round;
        }
    }

<div>This is a nice div.</div>

Answer 1

设置div { border: 20px solid orange; width: 250px; height: 120px; background-image: linear-gradient(90deg, rgba(40, 180, 255, 0.9), rgba(40, 100, 255, 0.9)); font-size: 2em; font-family: Geneva; margin: 100px auto 0px auto; padding: 10px; } @supports (border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png)) { div { border-image-source: url(https://raw.githubusercontent.com/Sathyaish/Practice/master/CSS/images/Border.png); border-image-slice: 30%; border-image-repeat: round; } }属性的宽度为：

＆＃13;

＆＃13;

<div>This is a nice div.</div>

＆＃13;

itertools.slice

＆＃13;

＆＃13;

＆＃13;