CSS 边框图像渐变适用于 Chrome，而不是 Firefox 或 IE答案

【问题标题】：CSS border-image gradient works in Chrome, not Firefox or IECSS 边框图像渐变适用于 Chrome，而不是 Firefox 或 IE
【发布时间】：2016-03-11 06:47:46
【问题描述】：

如何从 Chrome 中获得以下效果以在 Firefox 和 IE 中工作？

HTML

<a class="button-style">Evil Whales</a>

CSS

.button-style
{
 background: linear-gradient(to bottom,
   rgba(129,232,117,1) 0%,
   rgba(129,232,117,1) 50%,
   rgba(62,179,48,1) 51%,
   rgba(62,179,48,1) 100%);

 border-image: linear-gradient(to bottom,
   rgba(155,156,157,1) 0%,
   rgba(246,249,252,1) 100%) 25 30 10 20 repeat;

 border-image-repeat: stretch;

 border-width: 4px;
}

【问题讨论】：

标签： css internet-explorer firefox

【解决方案1】：

您必须设置 border-style 才能让它在 Firefox 中工作。我不确定 IE（很遗憾，我无法在这里查看）。请参阅下面的更新代码，Firefox 中的结果是这样的：

.button-style {
  background: linear-gradient(to bottom, rgba(129, 232, 117, 1) 0%, rgba(129, 232, 117, 1) 50%, rgba(62, 179, 48, 1) 51%, rgba(62, 179, 48, 1) 100%);
  border-image: linear-gradient(to bottom, rgba(155, 156, 157, 1) 0%, rgba(246, 249, 252, 1) 100%) 25 30 10 20 repeat;
  border-style: solid; /*Added */
  border-image-repeat: stretch;
  border-width: 4px;
}

&lt;a class="button-style"&gt;Evil Whales&lt;/a&gt;

【讨论】：

【解决方案2】：

CSS Tricks 有一篇关于线性渐变的精彩文章，还有一个关于浏览器支持的部分：https://css-tricks.com/css3-gradients/

尝试使用如下所示的供应商前缀：

.gradient {

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));

  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to right, red, #f06d06);

}

根据caniuse.com，border-image 属性必须伴随着border style 属性，“注意border-style 和border-width 都必须指定（不要设置为none 或0）才能让border-images根据规范工作，尽管较旧的实现可能没有此要求。部分支持是指支持简写语法，但不支持单个属性（border-image-source、border-image-slice 等）。”

【讨论】：