CSS3 边框

说明：CSS3完全向后兼容，因此不必改变现有的设计。浏览器通常支持CSS2

CSS3模块

CSS3被划分为模块：

• 选择器
• 框模型
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

 

CSS3 边框

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

在文章中，您将学到一下边框属性

• border-radius
• box-shadow
• border-image

浏览器支持：

属性	浏览器支持
border-radius
box-shadow
border-image

IE9+支持border-radius和box-shadow属性。

Firefox,Chrome以及Safari支持所有新的边框属性。

注释：对于border-image，Safari5 以及更老的版本需要前缀-webkit-.

Opera支持border-radius和box-shadow属性，但是对于border-image需要前缀-0-。

CSS3 圆角边框

        /*圆角边框*/
        div {
            width:300px;
            height:50px;
            border:2px solid black;
            border-radius:25px;
            text-align:center;
        }

CSS3边框阴影

在CSS3中，box-shadow用于向边框添加阴影：

        div.shadowOne {
            width: 200px;
            height: 80px;
            background-color: orange;
            box-shadow: 10px 10px 5px #888888;
        }

CSS3边框图片

通过CSS3的border-image属性，你可以使用图片来创建边框：

 div.ImageOne {
            border: 10px;
            border-image: url(../Images/1.jpg) 30 30 round;
            width: 200px;
            height: 100px;
        }