利用css3圆角边框属性实现饼环图案以及由不同颜色组成的正方形图案

CSS3圆角边框属性

在CSS3以前，如果要制作圆角效果，需要在圆角的元素标签中加上4个空标签，再在每个空标签中应用一个圆角的背景，然后对这几个应用了圆角的标签进行相应的定位,这个过程十分麻烦。但是，使用CSS3中的border-radius属性，实现边框圆角效果就非常简单了。

CSS3的圆角边框实际上是在矩形的4个角分别做内切圆,然后通过设置内切圆的半径来控制圆角的弧度。其基本语法格式如下：

border-radius: 1-4 length|%  / 1-4 length|%;

在上面的语法中，length用于设置对象的圆角半径长度，不可为负值。

如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面的值设置其垂直半径。

如果没有“/”，则表示水平和垂直半径相等。其4个值是按照top-left、 top- right、bottom-right、 bottom-left的顺序来设置的。

如果省略bottom-left,则其与top- right相同;如果省略bottom-right,则其与top-left相同;如果省略top-right,则其与top-left 相同。

border-radius是一种缩写的方式，其实border-radius和border的属性一样,还可以把各个角单独拆分出来，也就是以下4种写法，其参数