这里涉及到了圆角和渐变色两个属性。
1.圆角：border-radius
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
2.渐变：linear-gradient
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
所以通常情况下认为的最简便的方法是：直接在具有圆角边框的属性下使用border-image来控制渐变，但这样是错误的。
有过经验的朋友会发现border-radius会出现属性失效的情况，因为两个属性看似是控制两个效果，但实际操作却都是操作了border边角。
所以目前大众化且普遍的做法如下：
采用遮罩显示的方式，渐变为底色背景，内层填充，未被遮挡的部分自然就显示为圆角边框。
具体操作方式有多种如：
（1）两个div控制，一个渐变背景板一个内层填充
（2）一个div通过after伪类元素添加渐变背景板
（3）利用div的盒模型属性content-box, padding-box使用渐变和填充
以上三个方法均可实现圆角渐变边框，目前的普遍做法也是如此。
但是以上方式有个致命的缺点，由于都是背景填充和遮罩，所以无法做到圆角渐变边框且背景透明。
想要实现圆角渐变边框且背景透明，纯css实现比较困难，博主没写出效果极佳的列子不做代码展示。
希望以上观点对阅读者有部分帮助，有纯css实现圆角渐变边框且背景透明的例子我会第一时间补全。