css渐变色边框的实现的方法

在项目中，边框的样式多种多样，一种常见的渐变色边框出现；而这种渐变色的边框又结合各种各样的设计，这里结果实现的效果与浏览器的兼容性总结渐变色的实现方法：

圆角的渐变边框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的效果；这里采用其他的方法实现：

1. 外面嵌套一层<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>

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