为了获得跨浏览器支持，你也可以用:before或:after来模拟渐变边框，这取决于你想做什么。

Mozilla目前只支持CSS渐变作为background-image属性的值，以及在简写背景中。

——https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Example 3 - Gradient Borders

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px; 

——http://www.cssportal.com/css3-preview/borders.htm

这是一个hack，但是在某些情况下你可以通过使用background-image来指定渐变，然后用box-shadow掩盖实际的背景来达到这种效果。例如:

p {
  display: inline-block;
  width: 50px;
  height: 50px;
  /* The background is used to specify the border background */
  background: -moz-linear-gradient(45deg, #f00, #ff0);
  background: -webkit-linear-gradient(45deg, #f00, #ff0);
  /* Background origin is the padding box by default.
  Override to make the background cover the border as well. */
  -moz-background-origin: border;
  background-origin: border-box;
  /* A transparent border determines the width */
  border: 4px solid transparent;
  border-radius: 8px;
  box-shadow:
    inset 0 0 12px #0cc, /* Inset shadow */
    0 0 12px #0cc, /* Outset shadow */
    inset -999px 0 0 #fff; /* The background color */
}

来自:http://blog.nateps.com/the-elusive-css-border-gradient

这里有一篇很好的css技巧文章:https://css-tricks.com/gradient-borders-in-css/

我能够想出一个非常简单的，单元素的解决方案，使用多个背景和background-origin属性。

.wrapper {
  background: linear-gradient(#222, #222), 
              linear-gradient(to right, red, purple);
  background-origin: padding-box, border-box;
  background-repeat: no-repeat; /* this is important */
  border: 5px solid transparent;
}

这种方法的优点是:

它不受z指数的影响 它可以通过改变透明边框的宽度来轻松缩放

去https://codepen.io/AlexOverbeck/pen/axGQyv?editors=1100看看吧

渐变边框的例子

使用border-image css属性

credit to: border-image

.grad-border { 身高:1 px; 宽度:85%; 保证金:0自动; 显示:flex; ｝ .left-border， .right-border { 宽度:50%; Border-bottom: 2px solid #695f52; 显示:inline-block; ｝ .left-border { Border-image:线性梯度(270deg， #b3b3b3， #fff) 1; ｝ .right-border { 边界图像:线性梯度(90度，#b3b3b3， #fff) 1; ｝ < div class = " grad-border”> < div class = "左边框" > < / div > < div class = "右边界" > < / div > < / div >

Webkit支持边界渐变，现在也接受Mozilla格式的渐变。

Firefox以两种方式支持渐变:

使用border-image和border-image-source 使用border-right-colors(右/左/上/下)

IE9不支持。