「Web前端开发进阶篇」CSS3学习（一）.docx

PAGE PAGE 1 「Web前端开发进阶篇」CSS3学习（一） CSS3用于控制网页的样式和布局，CSS3是最新的CSS标准，也是CSS的升级版，目前，用CSS实现的效果还是挺多挺炫的，在开发的过程中，避开不了用法CSS3，原本需要用JS或者Jquery完成的事，现在CSS3就可以完成了，而且不费事，省时省力，在开发过程中，学习着用CSS3去开发页面将会是前端人员必需要做的一件事。 【引言】 前面呢，我们把全部的CSS语法都讲解完了，之后接下里的文章里我们将会由浅入深的讲解CSS3，其中包含了边框、圆角、背景、渐变、文本效果、字体、2D转换、3D转化、过度、动画、多列、界面、按钮、分页，多媒体等等一系列的CSS3学问，我将会在接下来的课程分批次来讲解，跟我学CSS3，让页面动起来。   「Web前端开发进阶篇」CSS3学习（一） 学习CSS3之前呢，我们一定要知道扫瞄器的兼容性，这一点是十分重要的，对CSS3是没有一个W3C标准的，但是所有主流的服务器已经所有支持许多新功能，几乎全部的CSS3属性都支持IE8以上、前缀-moz-的火狐扫瞄器、前缀-webkit-的Google Chrome扫瞄器、前缀-webkit-的Safari扫瞄器、Opera12.1以上的扫瞄器，所以基本上在兼容性这方面不存太大的问题。不过大家写完以后为避开浮现问题一定要测试哦。   「Web前端开发进阶篇」CSS3学习（一） 接下我我们从基本的一些CSS3属性开头学起 在这里呢，我们主要学习三个边框属性： 1、CSS3圆角 在CSS3中，我们很简单创建圆角，用 border-radius 就可以创建，值可以是像素（px），也可以是百分比（%），也可单独给某个角添加，例如：   「Web前端开发进阶篇」CSS3学习（一） 2、CSS3盒阴影 CSS3中用 box-shadow 属性被用来添加阴影，在平常的开发中此效果也是常常的用，包括单边阴影，多边阴影等。例如：   「Web前端开发进阶篇」CSS3学习（一） 3、CSS3边界 我们可以用 border-image 属性用图像创建一个边框，让我们的边框越发形色多姿，例如：   「Web前端开发进阶篇」CSS3学习（一） 用法 CSS3 border-radius 属性，你可以给任何元素制作 quot;圆角quot;。可同时设置，例如：   「Web前端开发进阶篇」CSS3学习（一） 还可以创建椭圆边角，例如：   「Web前端开发进阶篇」CSS3学习（一） CSS3包含了几个新的背景属性，提供了更大背景元素控制，如下： 我们可以通过 background-image 来添加背景，不同的背景图像和图像用逗号隔开，全部的中显示在最顶端的为第一张。 然后给不同的设置多个不同的属性。例如： background-size指定背景图像的大小。 background-repeat指定重复填充还是不重复填充 background-Origin属性指定了背景图像的位置区域 background-clip背景剪裁属性是从指定位置开头绘制。 例如：   「Web前端开发进阶篇」CSS3学习（一） 其中，background-Origin属性、background-clip属性的值有content-box, padding-box,和 border-box，例如下图中那么存放或剪裁：   「Web前端开发进阶篇」CSS3学习（一） CSS3 渐变（gradients）可以让你在两个或多个指定的色彩之间显示平稳的过渡。它定义了两种类型的渐变： 1、线性渐变 为了创建一个线性渐变，你必需起码定义两种色彩结点。色彩结点即你想要展现平稳过渡的色彩。同时，你也可以设置一个起点和一个方向（或一个角度）。例如，下面是一个从上到下的线性渐变：   「Web前端开发进阶篇」CSS3学习（一） 同时，你也可以尝试这线性渐变 - 从左到右，线性渐变 - 对角，例如：   「Web前端开发进阶篇」CSS3学习（一） 下面的实例演示了如何创建一个带有彩虹色彩和文本的线性渐变：   「Web前端开发进阶篇」CSS3学习（一） 用法透亮?????度（transparent），例如：   「Web前端开发进阶篇」CSS3学习（一） 重复的线性渐变，例如：   「Web前端开发进阶篇」CSS3学习（一） 2、径向渐变 径向渐变由它的中央定义。 为了创