CSS3圆角详解

圆角 border-radius属性

border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

4个圆角（border-radius: 20px;）

水平圆角：（border-radius: 25px 5px;）：

垂直圆角（ border-radius: 5px 25px;）：

（border-radius: 15px 5px 25px;）：

（border-radius: 15px 5px 25px 0px;）：

单个圆角的设置：

 

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