数据库设计与应用第9章　CSS 3 新功能

CSS3新功能第9章汇报人：***目录CONTENTCSS3新属性过渡CSS3的变形和动画属性本章导读如同人类的进化一样，CSS3是

CSS2的“进化”版本，在

CSS2基础上，增强或新增了许多特性，弥补了

CSS2的众多不足之处，使得

Web开发变得更为高效和便捷，如动画、圆角、阴影、边框图片等。CSS3无疑对

Web前端开发带来质的飞跃。虽然目前CSS3还没有完全普及，而且浏览器也不完全支持，但对于我们积极地去学习和实践并不矛盾，掌握和学习

CSS3将是大势所趋。CSS3将是引导我们进入编写网页精彩世界的先驱技术，开发人员能够更轻松地创建功能强大、易于维护的网站。随着旧版浏览器所占市场份额逐渐减少，学习

CSS3技术将更有价值。这是作为一位优秀网站开发人员所必须掌握的技术之一，本章将对

CSS3新功能进行介绍。第一节PART.01CSS3新属性9.1.1圆角边框传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们无须花费时间制作这些图片，只需要设置圆角边框（border-radius）属性，其基本语法格式如下：border-radius:1-4length|%/1-4length|%;每个半径的四个值的顺序是：左上角，右上角，右下角，左下角（顺时针）。水平半径和垂直半径及四个圆角位置如图9-1所示。图9-1圆角图示9.1.1圆角边框一般情况下，如果属性值后面没有“/”符号，表示水平半径=垂直半径，例如：border-radius：50px；与border-radius：50px/50px；设置效果是一样的，表示水平半径和垂直半径都是50px。border-radius常用描述如下：border-radius:50px/*水平、垂直半径都是50px*/border-radius:050px;/*左上角和右下角为0，左下角和右上角为50px*/border-radius:010px20px;/*左上角为0，右上角和左下角为10px，右下角为20px*/border-radius:10px20px30px40px;/*左上角，右上角，右下角，左下角，顺指针方向*/9.1.2盒阴影盒阴影（box-shadow）属性向边框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2～4个长度值、可选的颜色值，以及可选的

inset关键词来规定，省略长度的值是0。其基本语法格式如下：box-shadow:h-shadowv-shadowblurspreadcolorinset;9.1.2盒阴影box-shadow属性值见表9-1。表9-1box-shadow属性值值描述h-shadow必需。水平阴影的位置，允许负值v-shadow必需。垂直阴影的位置，允许负值blur可选。模糊距离spread可选。阴影尺寸color可选。阴影的颜色。请参阅

CSS颜色值inset可选。将外部阴影（outset）改为内部阴影9.1.3透明度透明度（opacity）用来设置元素的不透明度，其属性值见表9-2。opacity属性的语法格式如下：opacity：value|inherit;表9-2opacity属性值值描述value规定不透明度。从0.0（完全透明）到1.0（完全不透明）inherit应该从父元素继承opacity属性的值9.1.4RGBACSS3中的

RGBA就是在

RGB（红色R+绿色G+蓝色B）的基础上加了一个通道

Alpha。RGBA不是

CSS属性，而是引入

CSS3的一个新颜色模块，当设定一个

RGBA

色彩时，参数依次设定为红、绿、蓝的颜色值，可以是0～255或百分数，Alpha透明值为0～1。第二节PART.02过渡通过过渡（transition）属性，可以让

Web前端开发人员不需要JavaScript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上有很多需要注意的细节和容易混淆的地方。9.2.1CSS过渡简介W3C（万维网联盟）允许

CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在获得焦点、单击或对元素做出任何改变的情况下触发，并以平滑的动画效果改变

CSS

的属性值。在

CSS3里使用transition属性可以实现过渡效果。transition属性见表9-3。表9-3transition属性属性描述transition简写属性，用于在一个属性中设置四个过渡属性transition-property规定应用过渡的CSS属性的名称transition-duration定义过渡效果花费的时间。默认是0transition-timing-function规定过渡效果的时间曲线。默认是"ease"transition-delay规定过渡效果何时开始。默认是09.2.2CSS过渡语法transition属性是一个简写属性，用于设置四个过渡属性，其语法格式如下：transition:propertydurationtiming-functiondelay;transition属性及取值情况见表9-4。表9-4transition属性及取值情况属性属性值描述transition-propertynone没有属性会获得过渡效果all所有属性都将获得过渡效果property定义应用过渡效果的CSS属性名称列表，列表以逗号分隔transition-durationtime规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值是0，意味着不会有效果9.2.2CSS过渡语法属性属性值描述transition-timingfunctionlinear规定以相同速度开始至结束的过渡效果ease规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in规定以慢速开始的过渡效果ease-out规定以慢速结束的过渡效果ease-in-out规定以慢速开始和结束的过渡效果transition-delaytime规定在过渡效果开始之前需要等待的时间，以秒或毫秒计9.2.2CSS过渡语法1.过渡多个属性假设我们想为前面的案例再添加一个文本颜色的过渡，该如何实现呢？可以通过使用多个过渡属性，在各个属性之间添加逗号分隔来实现，每个属性都有自己的过渡效果。9.2.2CSS过渡语法2.过渡时间函数过渡时间函数（transition-timing-function）规定过渡效果的时间曲线，如图9-7所示。图9-7transition-timing-function属性第三节PART.03CSS3的变形和动画属性CSS3在原来的基础上增加了变形和动画相关属性，通过这些属性，以前需要用

JavaScript才能实现的功能，现在可以轻松实现。CSS的变形功能可以对元素进行位移、旋转、缩放和倾斜4种几何变换的操作，CSS

3的动画功能则是和位移、旋转、缩放和倾斜4种几何变换操作相结合，从而产生平滑的动画效果。9.3.1CSS3的变形属性CSS3变形功能提供了两个属性，分别是

transform和

transform-origin。1.transformtransform属性用于设置元素的变形，可以设置一个或者一个以上的变形函数。目前，transform有5种基本变形函数可以选择，其基本语法格式如下：transform:rotate|scale|skew|translate|matrix;9.3.1CSS3的变形属性（1）transform

：translate（x，y）。x①表示

X轴上移动位置，y表示

Y轴上移动位置，中间用逗号分隔，其中

y可以省略，表示垂直方向没有位移。如果单方向位移可以直接使用

translateX（x）表示元素水平方向移动

x，translateY（y）表示元素垂直方向移动

y。①为与代码一致，此处用正体表示，余同。9.3.1CSS3的变形属性（1）transform

：translate（x，y）。例如：div1{transform:translate(100px,20px);}div2{transform:translateX(100px);}div3{transform:translateY(20px);}运行效果如图9-8所示。图9-8translate位移图示9.3.1CSS3的变形属性（2）transform：rotate（<angle>）。该属性使元素在二维平面上顺时针或逆时针旋转，rotate里面的单位是

deg，角度为正值时，顺时针旋转；角度为负值时，逆时针旋转。默认旋转的中心点是元素的中心点，如图9-10所示。图9-10rotate旋转图示9.3.1CSS3的变形属性（3）transform：scale（x，y）。给元素添加这个属性后就能控制它放大还是缩小。scale（x，y）使元素水平方向和垂直方向同时缩放（也就是

X轴和

Y轴同时缩放），scaleX（x）元素仅水平方向缩放（X轴缩放），scaleY（y）元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1，元素就放大，反之其值小于1时，元素则缩小。如果第2个参数未提供，则取与第1个参数一样的值。9.3.1CSS3的变形属性（3）transform：scale（x，y）。例如：div1{transform:scale(2,1.5);}div2{transform:scaleX(2)；}div3{transform:scaleY(2);}效果如图9-12所示。图9-12scale缩放效果9.3.1CSS3的变形属性（4）transform：skew（x，y）。该属性使元素在水平和垂直方向同时扭曲（

X轴和

Y

轴同时按一定的角度值进行扭曲变形）；skewX（x）仅使元素在水平方向扭曲变形（

X轴扭曲变形）；skewY（y）仅使元素在垂直方向扭曲变形（

Y轴扭曲变形），其语法格式如下：transform:skew(<angle>,<angle>)第一个参数对应

X轴，第二个参数对应

Y轴。如果第二个参数未提供，则值为0，也就是

Y轴方向无斜切。9.3.1CSS3的变形属性（4）transform：skew（x，y）。例如：div1{transform:skew(30deg,10deg);}div2{transform:skewX(30deg);}div3{transform:skewY(10deg);}skew效果如图9-14所示。图9-14skew效果9.3.1CSS3的变形属性（5）transform：matrix（a，b，c，d，x，y）。该属性将所有

2D变形函数（位移、旋转、缩放和倾斜）组合在一起。需要注意的是，如果我们同时对一个元素进行

transform

的多种属性操作，如

rotate、scale、translate三种，那么多个属性之间需要用空格隔开，其格式如下：transform:rotate(45deg)translateY(30px)scale(0.5)skew(30deg,30deg);提示：操作顺序会影响转换的效果（先旋转会改变坐标轴方向）。当同时有位移和其他属性时，记得要将位移放到最前面。9.3.1CSS3的变形属性CSS3变形功能提供了两个属性，分别是

transform和

transform-origin。2.transform-origintransform-origin表示元素旋转中心点，默认值为

50%50%。第一个值表示元素旋转中心点的水平位置，它还可以赋值

left、right、center、长度、百分比；第二个值表示元素旋转中心点的垂直位置，它还可以赋值

left、right、center、长度、百分比。9.3.2CSS3的

3D变形属性9.3.1节提到的变形可以理解为

2D变形，当然，CSS3也提供了3D变形。1.transformtransform属性增加了3个变形函数：（1）rotateX

：表示元素沿着

X轴旋转。（2）rotateY

：表示元素沿着

Y轴旋转。（3）rotateZ

：表示元素沿着

Z轴旋转。9.3.2CSS3的

3D变形属性2.transform-styletransform-style用于设置嵌套的子元素在

3D空间的显示效果，它可以设置两个值：（1）flat

：子元素不保留其

3D位置，默认值。（2）preserve-3d

：子元素保留其

3D位置。9.3.2CSS3的

3D变形属性3.perspectiveperspective设置成透视效果，透视效果为近大远小，该属性值用于设置

3D元素距离视图的距离，单位为像素，已经内置，我们只需要写具体的数值即可，默认为0。当为元素定义

perspective属性时，其子元素会获得透视效果，而不是元素本身。9.3.2CSS3的

3D变形属性4.perspective-originperspective-origin设置

3D元素所基于的

X轴和

Y轴，改变

3D元素的底部位置，该属性取值与

transform-origin相同，默认值为50%50%。9.3.3CSS3的动画属性CSS3提供了强大的补间动画支持：animation，它可以做到一系列变换（包括平移、缩放、旋转、改变透明度等）。在实际开发中，因为浏览器的兼容性，有时还需要加上

-moz-、-webkit-、-o-等前缀。动画涉及的属性见表9-5。9.3.3CSS3的动画属性属性含义属性值@keyframes定义动画选择器name时间CSS样式animation-name使用@keyframes定义的动画none/动画选择器定义的名字animation-delay设置动画的延迟时间timeanimation-duration设置动画的持续时间timeanimation-timing-function设置动画的时间曲线linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier（n，n，n，n）animation-iteration-count设置动画的播放次数数字/infiniteanimation-direction设置动画反向播放normal/alternateanimation-play-state设置动画播放状态paused/runninganimation一条声明设置所有动画属性animation-nameanimation-delayanimation-durationanimation-timing-functionanimation-iteration-countanimation-directionanimation-play-state表9-5动画属性9.3.3CSS3的动画属性通过

@keyframes规则可以创建动画。以百分比规定改变发生的时间，或者通过关键词“from”和“to”定义，等价于0和100%，0是动画开始的时间，100%是动画结束的时间。animation-name的属性值为

@keyframes动画规定的名称，表示使用

@keyframes预先定义的动画，如果赋值为

none，表示无动画效果。animation-d