CSSborder-radius边框圆⾓
在CSS3中提供了对边框进⾏圆⾓设定的⽀持，可对边框1~4个⾓进⾏圆⾓样式设置。
⽬录
1.
2.
3.
4.
1. 介绍
1.1 圆⾓属性
CSS3提供了5种圆⾓属性
border-radius：同时设置4个边框的圆⾓样式。
border-top-left-radius：设置左上⾓边框的圆⾓样式。
border-top-right-radius：设置右上⾓边框的圆⾓样式。
border-bottom-left-radius：设置左下⾓边框的圆⾓样式。
border-bottom-right-radius：设置右下⾓边框的圆⾓样式。
⽰例：
1.2 浏览器⽀持情况
最⼩版本⽀持：IE 9 、Chrome 4
1.3 引⽤资料
规范：
⽂档：
2. value值的格式和类型
border-*-radius属性的值可分别设定⽔平半径和垂直半径；若省略垂直半径，则垂直半径默认采⽤⽔平半径的值。
⽽每个值，⽀持的单位有固定长度和百分⽐。若设置百分⽐格式，则⽔平半径的百分⽐是指边框的宽度，⽽垂直半径的百分⽐是指边框的⾼度。组合如下(以border-radius为例)：
1) border-radius:20px; // 表⽰圆⾓的⽔平半径和垂直半径都为20px长度。
2) border-radius:20px/40px; // 表⽰圆⾓的⽔平半径的长度为20px，垂直半径的长度为20px。
3) border-radius:20%; // 表⽰圆⾓的⽔平半径和垂直半径都为各⾃边框长度的20%。
4) border-radius:20%/30%; // 表⽰圆⾓的⽔平半径为边框宽度的20%，垂直半径都为边框⾼度的20%。
5) border-radius:20px/30%; // 表⽰圆⾓的⽔平半径长度20px，垂直半径都为边框⾼度的20%。
⽰例：
3. border-radius 1~4个参数说明
border-radius可以⼀次性对四个⾓设置相同的值，也可以对4个⾓分别设置圆⾓样式。
⽽秘诀就在于设定border-radius的参数个数。
⾸先看下CSS规范对border-radius的参数说明：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
可得知border-radius的参数个数范围为1~4个，这⾥要注意点⽔平半径和垂直半径的分别使⽤时：在border-radius中先设置4个边⾓的⽔平半径再设置4个边⾓的垂直半径。
下⾯分别说明参数1~4个参数所代表的含义：
3.1 参数个数：1
说明：4个边框的圆⾓样式都采⽤这个设置。
⽰例：border-radius: 20px; // 4个边框圆⾓样式都为20px
3.2 参数个数：2
说明：
  第①参数：左上⾓和右下⾓边框的圆⾓样式。
  第②参数：右上⾓和左下⾓边框的圆⾓样式。
⽰例：border-radius: 20px 40px; // 左上⾓和右下⾓：20px；右上⾓和左下⾓：40px
3.3 参数个数：3
说明：
  第①参数：左上⾓边框的圆⾓样式。
  第②参数：右上⾓和左下⾓边框的圆⾓样式。
border radius什么意思
  第③参数：右下⾓边框的圆⾓样式。
⽰例：border-radius:20px 40px 60px; // 左上⾓：20px；右上⾓和左下⾓：40px；右下⾓：60px
3.4 参数个数：4
说明：
  第①参数：左上⾓边框的圆⾓样式。
  第②参数：右上⾓边框的圆⾓样式。
  第③参数：右下⾓边框的圆⾓样式。
  第④参数：左下⾓边框的圆⾓样式。
⽰例：border-radius:20px 40px 60px 80px; // 左上⾓：20px；右上⾓：40px；右下⾓：60px；左下⾓：80px
4.在线⽰例
4.1 ⽰例
4.2 在线地址
地址：
End
菜单加载中...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。