今天在做outline-radius相关教程的时候,发现:webkit内核的浏览器不支持这个属性,这个圆角外围属性居然只有火狐支持。Et4HTML5中文学习网 - HTML5先行者学习网
样式Et4HTML5中文学习网 - HTML5先行者学习网
CSS Code复制内容到剪贴板
    - .b_bulea{   
     - border:#17548e 1px solid;    
     - border-radius:3px;    
     - -moz-radius:3px;    
     - -webkit-border-radius:3px;    
     - -ms-border-radius:3px;    
     - -o-border-radius:3px;    
     - outline:1px solid #062544;    
     - outline-offset:0;    
     - outline-radius:3px;    
     - -moz-outline-radius:3px;    
     - -webkit-outline-radius:3px;    
     - -ms-outline-radius:3px;    
     - -o-outline-radius:3px;    
     - background:#074682;    
     - background:-moz-linear-gradient(#074682,#00305f);    
     - background: -webkit-gradient(linear, left top, left bottombottom, from(#074682), to(#00305f));   
     - }   
 
火狐下效果:Et4HTML5中文学习网 - HTML5先行者学习网
Et4HTML5中文学习网 - HTML5先行者学习网
Et4HTML5中文学习网 - HTML5先行者学习网
谷歌浏览器:Et4HTML5中文学习网 - HTML5先行者学习网
Et4HTML5中文学习网 - HTML5先行者学习网
看来如果书写无误的话,结论就是:webkit内核的浏览器暂不支持outline-radius这个属性。Et4HTML5中文学习网 - HTML5先行者学习网
我们现在应该做什么呢,其实这种类似于图片渐变边框效果我们需要的情况下不是太多,只能用border了。Et4HTML5中文学习网 - HTML5先行者学习网