CSS3 圆角样式

CSS 中 border-radius 属性可以设置元素边框的圆角样式，例如这样：

border-raidus:5px;

当然，使用border-radius可以给任何元素指定圆角。

例如，指定元素边框圆角。

border-radius: 25px;
border: 2px solid #8AC007;

例如，指定带背景颜色元素圆角。

border-radius: 25px;
background: #8AC007;

例如，图片元素圆角。

border-radius: 25px;
background: url(images/img_girl.jpg);

border-radius 详细说明

border-radius属性值可以指定四个值代表着四个角的设置。当然，它有几种写法如下：

• 一个值： 四个圆角值相同
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

示例：

border-radius:5px;

border-radius:5px 10px;

border-radius:5px 10px 15px;

border-radius:5px 10px 15px 5px;

CSS3 圆角属性