CSS3圆角样式解析

CSS3的border-radius属性，最常见的也许是被用来画圆形，方法是设置一个正方形div之后，给它的border-radius属性设置50%的值。

今天对border-radius属性做一个扩展，首先看一下最基本的border-radius样式：

border-radius:水平值1 水平值2 水平值3 水平值4 / 垂直值1 垂直值2 垂直值3 垂直值4;

斜杠前代表水平半径，斜杠后代表垂直半径

而且，为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（如下图）：

4，3，2，1个值的分配情况

当然也可以单独设置每个角的圆角值，如果不嫌麻烦的话：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

老版本IE不支持圆角属性，可以参考这篇文章的解决办法：http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser---

实例：

1.一个半椭圆

上半椭圆

HTML代码：

<div class="example1"></div>

CSS代码：

.example1 {
width:200px;
height: 150px;
border-radius: 50% / 100% 100% 0 0;
background: #8BC34A;
}

2.不同水平和垂直半径的图形

暂时想不到是什么

HTML代码：

<div class="example2"></div>

CSS代码：

.example2 {
width:200px;
height: 200px;
border-radius:100px/70px;
background: red;
}

3.border 画的圆形

貌似在哪里见过……

HTML代码：

<div class="example3"></div>

CSS代码：

.example {
width:0;
height:0;
border:100px solid gray;
border-radius:100px;
border-right-color:transparent;
}

好的，关于border-radius属性，先了解这么多吧。