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 边框,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。