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边框阴影

在CSS3中,box-shadow用于向边框添加阴影:

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

CSS3 边框

CSS3边框图片

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

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

CSS3 边框

上一篇:Android 自定义支持快速搜索筛选的选择控件(一)


下一篇:编码符_new