传统的圆角生成方案,必须使用多张图片作为背景图案 CSS3圆角的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。 * 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况
用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆,这个(椭)圆与边框的交集形成圆角效果。 默认值 : 0 不可继承 值: 固定的px值定义圆形半径或椭圆的半长轴,半短轴。不能用负值 使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。不能用负值
这是一个简写属性,用来设置 border-top-left-radius,border-top-right-radius,border-bottom-right-radius ,border-bottom-left-radius,半径的第一个语法取值可取1~4个值: border-radius: radius border-radius: top-left-and-bottom-right top-right-and-bottom-left border-radius: top-left top-right-and-bottom-left bottom-right border-radius: top-left top-right bottom-right bottom-left
border-radius: 10px; border-radius: 10px 20px; border-radius: 10px 20px 30px 40px; border-radius: 10%; border-radius: 10% 20%; border-radius: 10% 20% 30% 40%;半径的第二个语法取值也可取1~4个值 border-radius: (first radius values) / radius border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right border-radius: (first radius values) / top-left top-right bottom-right bottom-left
border-radius: 10px/10px; border-radius: 10px/10px 20px; border-radius: 10px/10px 20px 30px 40px; border-radius: 10%/10%; border-radius: 10%/10% 20%; border-radius: 10%/10% 20% 30% 40%;注意: 百分比值 在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010) 在 11.50 版本以前的 Opera 中实现有问题。 Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴都相对于盒子模型的宽度。 在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。