CSS3属性border-radius绘制的图形

星期日 2013/12/01 13:13 阅读：10711 评论：3 作者：ivan 分类：CSS、Web前端

border-radius，css3的圆角属性。但是除此会是圆角，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

展示

把这些基本的图形进行组合，还可以描绘成不同的图案。以下只是简单的几个举例，更多的图形，自己动手画吧。仅border-radius就能实现这么丰富的图案，如果再加上边框大小、渐变颜色和阴影等，将会添加更多的质感。更多图形请参见：CSS3绘制各种图形效果

语法和解释

border-radius可以通过值来定义样式相同的角，也对每个角分别定义。下面的表格解释了各个写法所表示的效果。

语法	解释
border-radius:10px	将创建四个大小一样的圆角，如图1和2。
border-radius:10px 15px 10px 5px;	四个值分别表示左上角、右上角、右下角、右下角。
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;	斜杠前面的一组四个值分别表示四个角的水平半径；斜杠后面的一组四个值分别表示四个角的垂直半径。如图7。
border-radius:10px 20px 40px/20px 50px;	斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。两个值、三个值的顺序规则你懂的哈。