CSS3 圆角（border-radius）

待我称王封你为后i 2022-08-05 08:50 188阅读 0赞

值：半径的长度

# 前缀： #

\-moz(例如 -moz-border-radius)用于Firefox

\-webkit(例如：-webkit-border-radius)用于Safari和Chrome。

# 例1. #

#round {
        padding:10px; width:300px; height:50px;
        border: 5px solid #dedede;
        -moz-border-radius: 15px;      /* Gecko browsers */
        -webkit-border-radius: 15px;   /* Webkit browsers */
        border-radius:15px;            /* W3C syntax */
    }

效果：

![Image 1][] ![20150911194827102][]

# 例2 ：无边框 #

#round {
        padding:10px; width:300px; height:50px;
        background:#FC9; 
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius:15px;
    }

效果：

![20150911194906334][]  
![Image 1][]

书写顺序：

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

# 其他： #

支持上、右、下、左

border-radius:5px 15px 20px 25px;

支持 拆分书写：

/* Gecko browsers */
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 20px;
     
    /* Webkit browsers */
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 20px;
     
    /* W3C syntax */
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius:  20px;

# 支持性： #

<table style="margin-left:30px"> 
 <tbody> 
 <tr style="background:gray"> 
 <th>浏览器</th> 
 <th>支持性</th> 
 </tr> 
 </tbody> 
 <tbody> 
 <tr> 
 <td>Firefox(2、3+) </td> 
 <td>√</td> 
 </tr> 
 <tr> 
 <td>Google Chrome(1.0.154+…) </td> 
 <td>√ </td> 
 </tr> 
 <tr> 
 <td>Google Chrome(2.0.156+…) </td> 
 <td>√ </td> 
 </tr> 
 <tr> 
 <td>Safari(3.2.1+ windows) </td> 
 <td>√ </td> 
 </tr> 
 <tr> 
 <td>Internet Explorer(IE7, IE8) </td> 
 <td>×</td> 
 </tr> 
 <tr> 
 <td>Opera 9.6 </td> 
 <td>× </td> 
 </tr> 
 </tbody> 
</table>

[Image 1]: 
[20150911194827102]: /images/20220731/ee235274dd994221b5a284025c3260db.png
[20150911194906334]: /images/20220731/84892b5d7a9c4bf580cc3f45a22c67c9.png