邊框顏色漸變：
方法一：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>
兼容性比較好，可以正常使用