16 CSS圆角

tech2022-08-06  136

CSS圆角

传统的圆角生成方案,必须使用多张图片作为背景图案  CSS3圆角的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:       * 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。   * 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。   * 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况

border-radius 

用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆,这个(椭)圆与边框的交集形成圆角效果。                 默认值  :  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 之前) 不支持。       

最新回复(0)