html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

WebKit的outline-radius:是否支持?_HTML5中文网 - 我们以促进HTML5在中国的普及而努力

[ ] 已经帮助:人解决问题

 今天在做outline-radius相关教程的时候,发现:webkit内核的浏览器不支持这个属性,这个圆角外围属性居然只有火狐支持。Et4HTML5中文学习网 - HTML5先行者学习网

样式Et4HTML5中文学习网 - HTML5先行者学习网

CSS Code复制内容到剪贴板
  1. .b_bulea{   
  2. border:#17548e 1px solid;    
  3. border-radius:3px;    
  4. -moz-radius:3px;    
  5. -webkit-border-radius:3px;    
  6. -ms-border-radius:3px;    
  7. -o-border-radius:3px;    
  8. outline:1px solid #062544;    
  9. outline-offset:0;    
  10. outline-radius:3px;    
  11. -moz-outline-radius:3px;    
  12. -webkit-outline-radius:3px;    
  13. -ms-outline-radius:3px;    
  14. -o-outline-radius:3px;    
  15. background:#074682;    
  16. background:-moz-linear-gradient(#074682,#00305f);    
  17. background: -webkit-gradient(linear, left topleft bottombottom, from(#074682), to(#00305f));   
  18. }   

火狐下效果:Et4HTML5中文学习网 - HTML5先行者学习网

Et4HTML5中文学习网 - HTML5先行者学习网
Et4HTML5中文学习网 - HTML5先行者学习网
谷歌浏览器:Et4HTML5中文学习网 - HTML5先行者学习网

Et4HTML5中文学习网 - HTML5先行者学习网
看来如果书写无误的话,结论就是:webkit内核的浏览器暂不支持outline-radius这个属性。Et4HTML5中文学习网 - HTML5先行者学习网

我们现在应该做什么呢,其实这种类似于图片渐变边框效果我们需要的情况下不是太多,只能用border了。Et4HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助