CSS3属性border-radius参数详解
border-radius，国内翻译成圆⾓，你可能以为这个属性就是⽤来画圆⾓，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆⾓，还可以创建椭圆⾓，把这些⾓按照不同的顺序和⼤⼩来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。
语法和解释
border-radius可以通过值来定义样式相同的⾓，也对每个⾓分别定义。下⾯的表格解释了各个写法所表⽰的效果。
语法
border-radius:10px
解释
将创建四个⼤⼩⼀样的圆⾓，如图1和2。
语法
border-radius:10px 15px 10px 5px;
解释
四个值分别表⽰左上⾓、右上⾓、右下⾓、右下⾓。
语法
border radius什么意思border-radius:10px 15px;
解释
第⼀个值表⽰左上⾓、右下⾓；第⼆个值表⽰右上⾓、左下⾓。
语法
border-radius:10px 15px 5px;
解释
第⼀个值表⽰左上⾓；第⼆个值表⽰右上⾓、左下⾓；第三个值表⽰右下⾓。
语法
border-bottom-left-radius:20px 10px;
解释
创建不对称的⾓–椭圆⾓。
语法
border-radius:20px/10px;
解释
写椭圆⾓的时候，可以⽤短写法，创建四个⼀样的椭圆⾓。
语法
border-radius:10px 20px 30px 40px
解释
四个值分别表⽰四个⾓的半径（⽔平和垂直半径⼀样），如图11。
语法
border-radius:10px 20px 30px 40px/20px 50px 30px 10px;
解释
斜杠前⾯的⼀组四个值分别表⽰四个⾓的⽔平半径；斜杠后⾯的⼀组四个值分别表⽰四个⾓的垂直半径。
语法
border-radius:10px 20px 40px/20px 50px
解释
斜杠前⾯和后⾯每⼀组分别表⽰的是四个⾓⽔平半径和四个⾓垂直半径。两个值、三个值的顺序规则你懂的哈。
对于每个⾓的两个值，分别代表的是该⾓的⽔平⽅向和垂直⽅向的半径。若有四个值，上⾯表格有解
释。看下⾯这个图，或许会清晰些。边框⼤⼩和外半径、内半径的关系
实际的内半径相当于外半径减去相应的边框⼤⼩。相减的值中如果⾄少⼀个为为负值或零，则内半径为直⾓。不管怎样，相邻的两个边都会形成流畅的线条

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