css3 实现渐变边框

（1）一个渐变的底边线
border:1px solid transparent;
border-image: -webkit-linear-gradient(right,  #FF9848,#FF2A2B) 1 1;
border-image: -o-linear-gradient(right,  #FF9848,#FF2A2B)  1 1;
border-image: linear-gradient(to right,  #FF9848,#FF2A2B) 1 1;
border-image-slice:0 0 100% 0;//下边框

（2）一个渐变的带图片的边线

1. border-image-source:url(../img/border_img.png);
2. border-image-slice:0 0 100% 0;
3. border-image-width:0.05rem;
4. border-image-repeat:repeat;
5. 合起来写

border-image:url(../img/border_img.png) 0 0 100%/0.05rem 0 repeat;

6、若想此单边框在上方，可只修改

1. border-image-slice:100% 0 0 0;