css3的新属性border-radius的用法

        在css3中，它为我们提供了以往需要在js才能的实现的效果的方法。就如现在我们将要讲的border-radius，它是css3提供给我们的可以设置边框形状的属性。一般来说它是这样使用的：

button{
    border-radius: 10px  /*后面的参数也可以写成百分号形式，如10%*/
}

        这样子我们得出的效果是这样的

        但是如果说我想弄更加复杂点，比如类似如下这样的：

        这个我们该怎么做呢？其实在border-radius中，它分为四个方向，按顺序来的话是左上、右上、右下和左下，所以按照这样子我们可以这样写：

button{
    border-radius: 50% 0 50% 50%;
}

        这种写法等价于下面这种写法：

button{
    border-top-left-radius: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

        不过除此以外，border-radius可还没完，border-radius和它的相关的一些属性有第二个参数，一般如果不写这个参数的话第二个参数的值和第一个参数的值相等，第一个参数我们叫做水平半径，第二个参数我们叫做垂直半径。写入如下：

button{
    border-radius: 50%/20%;
}

        得出的结果和单纯用一个参数的有很大区别。在border-radius的相关的属性如上面的四个属性中也可以这样使用。

        border-radius可以像下面那样这样子写法：

button{border-radius: 2em 1em 4em / 0.5em 3em;}

        第一个参数内有三个值，分别表示的是左上、右上和左下、右下，第二个参数的值分别表示为左上和右下、右上和左下，所以上面的表达式等价于：

button{
    border-top-left-radius: 2em 0.5em;
    border-top-right-radius: 1em 3em;
    border-bottom-right-radius: 4em 0.5em;
    border-bottom-left-radius: 1em 3em;
}