css3 经典教程系列：css3 圆角(border-radius)详解

《css3 经典教程系列：css3 圆角(border-radius)详解》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS3经典教程系列：CSS3圆角（border-radius）详解《CSS3入门教程系列》前一篇文章详细介绍了CSS3 RGBA 特性的用法，今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法。　　以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行定位到相应的位置，非常繁琐。您可能感兴趣的相关文

2、章·Web开发人员和设计师必读文章推荐·20个非常绚丽的CSS3特性应用演示·35个让人惊讶的CSS3动画效果演示·推荐12个漂亮的CSS3按钮实现方案·24款非常实用的CSS3工具终极收藏 　　现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的HTTP的请求，网页载入速度将变快；三是增加视觉美观性。　　既然 border-radius 有这么多好处，我们就从他的语法，属性和属性

3、值等方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作什么？有这么多，那我们就开始吧：基本语法：　　border-radius：none

4、{1,4}[/{1,4}]?取值范围：　　：由浮点数字和单位标识符组成的长度值。不可为负值。简单说明：　　border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top

5、-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：　　1、只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等。　　2、有两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值　　3、有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他

6、们会相等,第三个值是设置bottom-right。　　4、有四个值，其中第一个值是设置top-left而第二个值是top-right第三个值bottom-right第四个值是设置bottom-left。　　前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴在X轴，具体看下面：?1234border-top-left-radius: 

7、>  //左上角border-top-right-radius:  //右上角border-bottom-right-radius:  //右下角border-bottom-left-radius:   //左下角　　这里说一下，各角拆分出来取值方式： 中第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如

8、果任意一个值为0，那么这个角就不是圆角。　　border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、GoogleChrome10.0+、Opera10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么我为了能兼容各大内核的老版浏览器，我们看看border-radius在不

9、同内核浏览器下的书写格式：　　1、Mozilla(Firefox,Flock等浏览器)?1234-moz-border-radius-topleft://左上角-moz-border-radius-topright://右上角-moz-border-radius-bottomright://右下角-moz-border-radius-bottomleft://左下角　　等价于：?1-moz-border-radius://简写　　2、WebKit(Safari,Chrome等浏览器