1. border-radius
标准的border-radius
border-*-radius可以写为一个值和两个值,当一个值的时候表示圆角的宽高;两个值的时候,第一个值表示水平宽度,第二个值表示垂直高度。
原文:The two length or percentage values of the ‘border-*-radius’ properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.(来源:http://www.w3.org/TR/css3-background/#the-border-radius)
border-radius: 5px;
等价于
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-radius: 5px 25px;
等价于
border-top-left-radius: 5px;
border-top-right-radius: 25px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 25px;
border-radius: 25px 5px 50px / 15px 30px;
等价于
border-top-left-radius: 25px 15px;
border-top-right-radius: 5px 30px;
border-bottom-right-radius: 50px 15px;
border-bottom-left-radius: 50px 30px;
-webkit-border-radius
-webkit-border-radius有一个值的时候和border-radius时一样,-webkit-border-radius有两个值时和border-radius不同,三个值和四个值时二者一样。
-webkit-border-radius: 15px 20px;
等价于
border-top-left-radius: 15px 20px;
border-top-right-radius: 15px 20px;
border-bottom-right-radius: 15px 20px;
border-bottom-left-radius: 15px 20px;