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

Question

我正在练习并尝试显示边框图像。我创建了图像，它可以在这里找到。

我正在运行 Firefox 60.0.1 64 位。

我检查了开发人员工具中的网络选项卡，图像加载得很好。我@supports 的规则也很好用。并且没有 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>

标签： css

Answer 1

设置border一些宽度的属性：

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;
  }
}

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