css3实现border渐变色解析

哈哈阅读：919 2020-02-19 12:08:06 评论：0

 
案例1
 .box{ 
     width: 100px; 
     height: 100px; 
     border:10px solid #ddd; 
     border-image: -webkit-linear-gradient(#ddd,#000) 30 30; 
     border-image: -moz-linear-gradient(#ddd,#000) 30 30; 
     border-image: linear-gradient(#ddd,#000) 30 30; 
}

 
案例2

.navbox{ border-right: 1px solid;
　　border-image: -webkit-linear-gradient(#00569D , white , #00569D)1 10 1; /* 控制边框颜色渐变 */
　　border-image: -moz-linear-gradient(#00569D , white , #00569D)1 10 1;
　　border-image: linear-gradient(#00569D , white , #00569D)1 10 1; /* 标准的必须写在最后 */
}