CSS3差别(关于Webkit和标准)

[b]1. border-radius[/b]

[b]标准的border-radius[/b]

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;


[b]-webkit-border-radius[/b]

-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;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值