CSS3：boder-radius

圆角：border-radius

用来设置边框圆角。当使用一个半径时确定一个圆形；当使用两个半径时确定一个椭圆，这个(椭)圆与边框的交集形成圆角效果。
默认值 : 0 不可继承
常用：border-radius:50%;(当正方形时设置成圆，长方形时设置成椭圆。)
移动端建议用px值来设置圆角
下面的当作了解就可以了。

值：
固定的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 

   半径的第二个语法取值也可取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 

注意

百分比值
   在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
   在 11.50 版本以前的 Opera 中实现有问题。
   Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
   在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
   CSS3圆角的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点：
  * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。

* 提高网页性能。由于不必再发出多余的HTTP请求，网页的载入速度将变快。
　　* 增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况

最后

以上就是长情咖啡豆为你收集整理的CSS3：boder-radius的全部内容，希望文章能够帮你解决CSS3：boder-radius所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。