css-border渐变

html部分 

<div class="content"></div>

css部分 

1. 四条边都渐变 

margin: 50px;
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;

 

2. 一条边渐变

.content {
  margin: 50px;
  width: 100px;
  height: 100px;
  border:10px solid #ddd;
  background-clip:padding-box,border-box;
  background-origin:padding-box,border-box;
  background-image:linear-gradient(135deg,#ddd,#ddd),linear-gradient(135deg,#E70303,#FFFF44);
  border-bottom:10px transparent solid;

}