CSS3用于控制网页的样式和布局,CSS3是最新的CSS标准,也是CSS的升级版,目前,用CSS实现的效果还是挺多挺炫的,在开发的过程中,避免不了使用CSS3,原本需要用JS或者Jquery完成的事,现在CSS3就可以完成了,而且不费事,省时省力,在开发过程中,学习着用CSS3去开发页面将会是前端人员必须要做的一件事。
【引言】
前面呢,我们把所有的CSS语法都讲解完了,之后接下里的文章里我们将会由浅入深的讲解CSS3,其中包含了边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转化、过度、动画、多列、界面、按钮、分页,多媒体等等一系列的CSS3知识,我将会在接下来的课程分批次来讲解,跟我学CSS3,让页面动起来。
CSS3浏览器支持学习CSS3之前呢,我们一定要知道浏览器的兼容性,这一点是非常重要的,对CSS3是没有一个W3C标准的,但是全部主流的服务器已经全部支持许多新功能,几乎所有的CSS3属性都支持IE8以上、前缀-moz-的火狐浏览器、前缀-webkit-的Google Chrome浏览器、前缀-webkit-的Safari浏览器、Opera12.1以上的浏览器,所以基本上在兼容性这方面不存太大的问题。不过大家写完以后为避免出现问题一定要测试哦。
接下我我们从基本的一些CSS3属性开始学起
CSS3边框在这里呢,我们主要学习三个边框属性:
- border-radius
- box-shadow
- border-image
1、CSS3圆角
在CSS3中,我们很容易创建圆角,用 border-radius 就可以创建,值可以是像素(px),也可以是百分比(%),也可单独给某个角添加,例如:
2、CSS3盒阴影
CSS3中用 box-shadow 属性被用来添加阴影,在平时的开发中此效果也是经常的用,包括单边阴影,多边阴影等。例如: