渐变边框来自Css-Tricks: http://css-tricks.com/examples/GradientBorder/

.multbg-top-to-bottom {
  border-top: 3px solid black;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(#000, transparent);
  background-image:
      -moz-linear-gradient(#000, transparent),
      -moz-linear-gradient(#000, transparent);
  background-image:
      -o-linear-gradient(#000, transparent),
      -o-linear-gradient(#000, transparent);
  background-image: 
      linear-gradient(#000, transparent),
      linear-gradient(#000, transparent);
  -moz-background-size: 3px 100%;
  background-size: 3px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; 
}

这是一个很好的半跨浏览器的方法，有渐变边界，淡出一半。只需将颜色停止设置为rgba(0,0,0,0)

.fade-out-borders {
min-height: 200px; /* for example */

-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}

<div class="fade-out-border"></div>

用法解释:

Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                              \---------------------------------/ \----------------------------/
                                Definition of the gradient line         List of color stops  

更多信息请点击:https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

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

Firefox以两种方式支持渐变:

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

IE9不支持。

我同意szajmon的观点。他和昆汀回答的唯一问题是跨浏览器兼容性。

HTML:

<div class="g">
    <div>bla</div>
</div>

CSS:

.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', gradientType='1'); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}

.g > div { background: #fff; }

你可以在不使用background, background-clip和background-origin删除边界半径的情况下实现这一点:

<时尚> .border-gradient-rounded { /* Border */ 边框:4px实体透明; border - radius: 20 px; 背景: 线性渐变(向右，白色，白色)， 线性梯度(右，红，蓝); 背景剪辑:填充盒、边框盒; 背景-起源:填充盒，边框盒; /*其他样式*/ 宽度:100 px; 高度:40像素; 填充:12 px; ｝ > < /风格 < div class = " border-gradient-rounded”> 内容 < / div >

基本上，这将白色背景放置在渐变背景上，从内部边界剪辑白色背景，并从外部边界剪辑渐变背景。这就是为什么你需要将边框定义为纯透明的。

此dev.to post的功劳归于方法2。

渐变边框的例子

使用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 >