CSS border-image gradient适用于Chrome，而不适用于Firefox或IE

Question

如何从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;
}

Answer 1

您必须设置.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; }才能让它在Firefox中运行。我不确定IE（我不能在这里检查）。请参阅下面的更新代码，Firefox中的结果如下：

＆＃13;

＆＃13;

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

＆＃13;

myFunction: function spinSeconds(event, ui) {
  if (ui.value >= 60) {
      $(this).spinner('value', ui.value - 60);
      $('#minutes').spinner('stepUp');
      return false;
  } else if (ui.value < 0) {
      $(this).spinner('value', ui.value + 60);
      $('#minutes').spinner('stepDown');
      return false;
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 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属性必须附带边框样式属性，“请注意，边框样式和边框宽度必须指定（不设置为无或0）图像按照规范工作，但较旧的实现可能没有此要求。部分支持是指支持简写语法，但不支持单个属性（border-image-source，border-image-slice等）。“