边框颜色渐变：
方法一：border-color
border-color: <color>/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/ /*我们可以分别给各边上色*/ border-top-color: <color>/*给上边框上色*/ border-right-color: <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /*给左框上色*/
方法二：背景图片模拟实现
css代码：
.gradient-block-vertical {
float:left;
margin:50px;
width:250px;
height:250px;
box-sizing:border-box;
border:20px solid transparent;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(#fff,#fff),linear-gradient( 90deg,#5c5fa5,#fff);
}
html代码：
<div class="gradient-block-vertical"></div>
兼容性比较好，可以正常使用