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 repeat;

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

  1. border-image-slice:100% 0 0 0;  
posted @ 2018-05-04 16:35  豆豆飞  阅读(358)  评论(0编辑  收藏  举报