IT源码网

css3实现border渐变色讲解

flyfish 2020年02月19日 Web前端 449 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; /* 标准的必须写在最后 */
}

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

状态码502和504讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。