网站首页学无止境CSS

CSS3 圆角 圆角边框(border-radius)

发布时间:2014-07-11 11:27:40编辑:phpcms阅读(146)

    前缀

    • -moz(例如 -moz-border-radius)用于Firefox
    • -webkit(例如:-webkit-border-radius)用于Safari和Chrome。

    例1

    1. #round {  
    2.     padding:10px;  
    3.     width:300px;  
    4.     height:50px
    5.     border5px solid #dedede;  
    6.     -moz-border-radius: 15px/* Gecko browsers */  
    7.     -webkit-border-radius: 15px/* Webkit browsers */  
    8.     border-radius:15px/* W3C syntax */ 

     

     

    效果:
    CSS圆角

    例2:无边框

    1. #round {  
    2.     padding:10px;  
    3.     width:300px
    4.     height:50px
    5.     background:#FC9;  
    6.     -moz-border-radius: 15px;  
    7.     -webkit-border-radius: 15px;  
    8.     border-radius:15px;  


    效果:
    CSS圆角

    书写顺序


     

    1. /* Gecko browsers */ 
    2. -moz-border-radius: 5px;  
    3. /* Webkit browsers */ 
    4. -webkit-border-radius: 5px;  
    5. /* W3C syntax - likely to be standard so use for future proofing */ 
    6. border-radius:10px



    其它

    支持上、右、下、左
     

    1. border-radius:5px 15px 20px 25px

    支持拆分书写

     

    1. /* Gecko browsers */ 
    2. -moz-border-radius-topleft: 20px
    3. -moz-border-radius-topright: 0
    4. -moz-border-radius-bottomleft: 0
    5. -moz-border-radius-bottomright: 20px
    6.   
    7. /* Webkit browsers */ 
    8. -webkit-border-top-left-radius: 20px
    9. -webkit-border-top-right-radius: 0
    10. -webkit-border-bottom-left-radius: 0
    11. -webkit-border-bottom-right-radius: 20px
    12.   
    13. /* W3C syntax */ 
    14. border-top-left-radius: 20px
    15. border-top-right-radius: 0
    16. border-bottom-right-radius: 0
    17. border-bottom-left-radius:  20px

    支持性

    浏览器 支持性
    Firefox(2、3+)
    Google Chrome(1.0.154+…)
    Google Chrome(2.0.156+…)
    Safari(3.2.1+ windows)
    Internet Explorer(IE7, IE8) ×
    Opera 9.6 ×
     
     

本文来源地址:http://www.cnblogs.com/rainman/archive/2011/06/21/2085800.html