css边框颜色渐变

<div class="cc"></div>

.cc { 
	width: 100px;
    height: 100px;
    border:10px solid #ddd;
    border-image: -webkit-linear-gradient(red,yellow) 30 30;
   	border-image: -moz-linear-gradient(red,yellow) 30 30;
    border-image: linear-gradient(red,yellow) 30 30; 
}

圆角的边框渐变

<div class="cc>
	<div class="box"></div>
</div>

.cc{ 
	width: 100px; 
   	height: 100px; 
    box-sizing: border-box; 
    padding: 5px; 
    border-radius: 50%; 
    background-image: -webkit-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
    background-image: -moz-linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%); 
    background-image: linear-gradient(top, red 0%, blue 30%, yellow 60%, green 90%);  
}
.box { 
	width:100%; 
    height:100%; 
    border-radius:50%; 
    background:#fff; 
}