你可以在不使用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。

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

这里有一篇很好的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 >

试试这个，对我很管用。

div { border - radius: 20 px; 身高:70 vh; 溢出:隐藏; ｝ {前div:: 内容:”; 显示:块; box-sizing: border-box; 高度:100%; 边框:1em实心透明; 边界图像:线性渐变(到顶部，红色0%，蓝色100%); border-image-slice: 1; ｝ < div > < / div >

这是小提琴的链接 https://jsfiddle.net/yash009/kayjqve3/1/希望这对你有所帮助

这是一个很好的半跨浏览器的方法，有渐变边界，淡出一半。只需将颜色停止设置为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