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;

        }

巴特西

CSS3 边框

最新文章

热门文章