边框颜色渐变：

方法一：border-color

border-color: <color>/*其中可以上一个值，也可以是多个值，具体我在这里不多说了，大家来时用到的也特别多*/ /*我们可以分别给各边上色*/ border-top-color: <color>/*给上边框上色*/ border-right-color: <color> /*给右边框上色*/ border-bottom-color:<color> /*给下边框上色*/ border-left-color: <color> /*给左框上色*/

著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

原文: http://www.w3cplus.com/content/css3-border-color ? w3cplus.com

缺点：兼容性不好，只有Mozilla的Firefox3.0+浏览器支持,使用时需要加前缀“-moz-”

 

方法二：背景图片模拟实现

 

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>

 

兼容性比较好，可以正常使用