在项目中，边框的样式多种多样，一种常见的渐变色边框出现；而这种渐变色的边框又结合各种各样的设计，这里结果实现的效果与浏览器的兼容性总结渐变色的实现方法：
圆角的渐变边框border-image
点击进入border-image的API介绍
使用：border-image: source slice width outset repeat|initial|inherit;
示例代码如下：
<style>.border-linear-gradient {padding: 30px;border-style: solid;border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;}.border-radial-gradient {padding: 30px;border-style: solid;border-image: radial-gradient(deepskyblue, deeppink) 20 / 10px;}.border-stripe {padding: 10px;border: 12px solid;border-image: repeating-linear-gradient(-45deg, red, red 5px, transparent 5px, transparent 10px) 12;}.border-dashed {padding: 10px;border: 1px dashed deepskyblue;border-image: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 5px, transparent 5px, transparent 10px) 1;}p.border-dashed {border-image: none;}</style><h4>1. 纯色渐变边框</h4><p class="border-linear-gradient">上下渐变边框</p><p class="border-radial-gradient">径向渐变边框</p><h4>2. 条纹边框</h4><div class="border-stripe">我们可以使用红色条纹边框表示警示</div><h4>3. 1:1的虚线</h4><p class="border-dashed">默认的虚线</p><div class="border-dashed">自定义的1:1的虚线</div>
这里应用到的linear-gradient与radial-gradient分别是：线性渐变,径向渐变
而第3点用的是repeating-linear-gradient重复的径向渐变，可以任意的控制虚线的边框，虚线的尺寸，虚线与实现的比例；这可以完美的解决border-style: dotted在不同的浏览器而表现虚线边框不一致的现象；
这里是引用张鑫旭作者所写的《css新世界》中的示例
展示效果：
实际的圆角渐变边框
在项目中的边框大多数为了美观都有圆角的效果，我们的第一反应就是使用border-radius的属性，但是border-radius无法改变border-image的效果；这里采用其他的方法实现：
外面嵌套一层<div>元素，设置圆角和溢出隐藏：
<style>.border-gradient {padding: 30px;border-style: solid;border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;}.father {border-radius: 10px;overflow: hidden;}</style><h4>1. 父元素圆角</h4><div class="father"><div class="border-gradient">圆角渐变边框</div></div>
使用clip-path剪裁，该方法无需要嵌套额外的元素
<style>.border-gradient {padding: 30px;border-style: solid;border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;}.clip-path {-webkit-clip-path: inset(0 round 10px);clip-path: inset(0 round 10px);}</style><h4>2. clip-path剪裁</h4><div class="border-gradient clip-path">圆角渐变边框</div>
实现的效果如下图所示：
轮廓的模拟
css中共有三个属性，可以实现对布局美哟影响的轮廓扩展，分别是：outline轮廓，box-shadow盒阴影，border-image边框图片；
.sel {outline: 2px solid pink;}.sel {box-shadow: 0 0 0 2px pink;}.sel {border: .02px solid; // Chrome浏览器中0px 无效果border-image: linear-gradient(pink, pink) 2 / 2px / 2px;}
三个属性的使用，都各有差异；根据使用的场景来选择；
注意事例：
border-image不应该写在border的后面，会被覆盖；因为border的缩写包含了border-image；
.sel {// border-image 无效 - 被覆盖border-image: linear-gradient(pink, pink) 2 / 2px / 2px;border: .02px solid;}
线性按钮的用例
展示色线性按钮样式：
展示代码如下：
<style>h1 {font-size: 20px;margin-bottom: 20px;}h2 {font-size: 16px;margin-bottom: 10px;}ul {margin: 0;padding: 0;list-style: none;}p {margin: 0;}.demo {padding: 30px 30px;}.demo p {font-size: 14px;margin-bottom: 15px;color: #888;}.ui-btn {border: none;outline: none;cursor: pointer;display: block;width: 100%;font-size: 16px;line-height: 1;padding: 16px 0;background: -webkit-linear-gradient(right, #47d998 0%, #01d5d8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;position: relative;}.ui-btn:active {outline: none;background: none;}.ui-btn::before {z-index: -1;position: absolute;content: ' ';left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;border-radius: 30px;padding: 1px;background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(left, #47d998 0%, #01d5d8 100%);background-clip: content-box, padding-box;}.ui-btn--danger {background: -webkit-linear-gradient(left, #ff8863 0%, #fa5c7a 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.ui-btn--danger::before {background: -webkit-linear-gradient(right, #fff 0%, #fff 100%), -webkit-linear-gradient(left, #ff8863 0%, #fa5c7a 100%);background-clip: content-box, padding-box;}</style><div class="demo"><h1>按钮</h1><ul><li><h2>VI色线性按钮：</h2><p>用于编辑、下一步、添加等一般操作，界面中可以出现多个</p><button class="ui-btn"><span>取消</span></button></li><li><h2>红色按钮：</h2><p>用于退出、删除等不可恢复的警示操作</p><button class="ui-btn ui-btn--danger"><span>删除</span></button></li></ul></div>
