CSS3的圆角Border-radius

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前面系统总结了CSS3GradientRGBA的用法,今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法。在CSS2中,大家都碰到过圆角的制作。当时,对于圆角的制作,我们都需要使用多张圆角图片做为背景,分别应用到每个角上,我应用最多的就是在需要圆角的元素标签中加四个空标签,然后在每个空标签中应用一个圆角的背景位置,然后在对这几个应用了圆角的标签进行定位到相应的位置,具体实现过程我就不在多讲,只看方法就知道烦死人。

如今CSS3中的border-radius出现后,让我们没有那么多的烦恼了,首先制作圆角图片的时间是省了,而且其还有多个优点:其一减少网站的维护的工作量,少了对图片的更新制作,代码的替换等等;其二、提高网站的性能,少了对图片进行http的请求,网页的载入速度将变快;其三增加视觉美观性。既然border-radius有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应用,又是如何制作圆角,还有就是除了制作圆角他还能制作什么?有这么多,那我们就开始吧:

一、语法:

border-radius : none | <length>{1,4} [/ <length>{1,4} ]?

 

二、取值:

<length>: 由浮点数字和单位标识符组成的长度值。不可为负值。

三、说明:

border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

1、border-radius: [ <length>{1,4} ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

前面,我们主要看了border-radius的缩写格式,其实border-radius和border属性一样,还可以把各个角单独拆分出来,也就是以下四种写法,这里我规纳一点,他们都是先Y轴在X轴,具体看下面:

border-top-left-radius: <length>  <length>   //左上角
border-top-right-radius: <length>  <length>  //右上角
border-bottom-right-radius:<length>  <length>  //右下角
border-bottom-left-radius:<length>  <length>   //左下角

 

这里说一下,各角拆分出来取值方式:<length> <length>中第一个值是圆角水平半径,第二个值是垂直半径,如果第二个值省略,那么其等于第一个值,这时这个角就是一个四分之一的圆角,如果任意一个值为0,那么这个角就不是圆角。

border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式,对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等,那么我为了能兼容各大内核的老版浏览器,我们看看border-radius在不同内核浏览器下的书写格式:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/border-radius

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部