CSS3 边框

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

您将学到以下边框属性：border-radius、box-shadow、border-image。

一、圆角边框border-radius

在 CSS3 中，border-radius 属性用于创建圆角：

1.1、border-radius语法

基本写法如下：

• 设置左上角

border-top-left-radius:10px;

• 设置右上角

border-top-right-radius:10px;

• 设置左下角

border-bottom-left-radius:10px;

• 设置左下角

border-bottom-right-radius:10px;

• 简写设置四个角

  执行顺序如下: 左上-右上-右下-左下

border-radius:1px 2px 3px 4px;

• 设置四角值统一

border-radius:10px;

• 支持百分比

border-radius:100%;

• 支持em

border-radius:2em;

• 支持运算

border-radius:30px/30px; /*支持加和除 其余的不支持*/

• JavaScript语法

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2浏览器兼容性

• -webkit：代表Webkit枘核浏览器，如chrome and safari私有属性或内核识别码。

-webkit-border-radius:5px;

• -moz：代表Firefox浏览器私有属性或内核识别码。

-moz-border-radius:5px;

• ms代表ie浏览器私有属性或内核识别码。

-ms-border-radius: 5px;

• -o-代表欧朋opera浏览器私有属性或内核识别码。

-o-border-radius: 5px;

• IE9+、Firefox 4+、Chrome、Safari 5+以及 opera支持 border-radius 属性。

border-radius:10px;