PPT
【文档说明】HTML+CSS+JavaScript网页设计-第9章-高级CSS操控课件.ppt，共(55)页，462.000 KB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-45129.html
以下为本文档部分文字说明：
HTML+CSS+JavaScript网页设计第9章高级CSS操控第1页第9章高级CSS操控本章概述本章的学习目标主要内容HTML+CSS+JavaScript网页设计第9章高级CSS操控第2页本章概述
除了美观的字体，好看的背景、恰当的边框和边距以及酷炫的图形和动画都是网页受欢迎的重要因素，动画和用户界面效果曾有很长一段时间是Flash具有感染力的重头戏，而CSS3将创建这些效果的能力内置于CSS变形、变换和动画规范当中。现在只要使用CSS就可以很容易的添加各种优秀的视觉效果。本章
将继续学习如何使用CSS控制HTML网页的呈现。包括设置元素背景、边框和边距、元素的变形处理以及CSS动画。通过本章的学习读者应进一步熟悉CSS的语法规则，掌握更高级的CSS操控，能够制作更丰富多彩的网页动画效果。HTML+CSS+Jav
aScript网页设计第9章高级CSS操控第3页本章的学习目标掌握设置元素背景的CSS属性了解盒子模型的基本概念掌握元素边框属性的设置理解内边距和外边距的含义掌握box-shadow属性的用法
掌握CSS3新增了transform属性的用法掌握CSS中的过渡动画的实现掌握CSS关键帧动画的原理和用法HTML+CSS+JavaScript网页设计第9章高级CSS操控第4页主要内容9.1设置元素
的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第5页9.1设置元素的背景为了方便、灵活地设计网页效果，CSS3增强了background属性的功能，允许在同一个元素内叠加多个背景图像。该属性
的基本语法如下：►background:[<bg-layer>,]*<final-bg-layer>;<bg-layer>表示一个背景图像层。每个背景图像层都可以包含下面的值：►[background-color]|[background-image]|[background-position]
|[background-size]|[background-repeat]|[background-origin]|[background-clip]|[background-attachment]HTML+CSS+JavaScript网页设计第9章高级CSS操控第6页backgrou
nd-color属性background-color属性能够为任何元素背景指定一个单一实体色。该属性的值与8.2.1节介绍的color属性值一样，可以有多种模式。当为<body>元素设置background-color属性时，它将影响整个文档。
而当其用于任何其他元素时，则会把指定的颜色用于为该元素创建的盒子边框内。前面的很多示例中就曾使用过该属性，这里不再赘述。HTML+CSS+JavaScript网页设计第9章高级CSS操控第7页background-image属性backgroun
d-image属性用于为元素设置背景图像。元素的背景占据元素的全部尺寸，包括内边距和边框，但不包括外边距。默认情况下，背景图像位于元素的左上角，并在水平和垂直方向上重复。background-image属性会在元素的背景中设置一幅图像。根据background-repea
t属性的值，图像可以无限平铺、沿着某个轴(X轴或Y轴)平铺，或者根本不平铺。初始背景图像根据background-position属性的值放置。HTML+CSS+JavaScript网页设计第9章高级CSS操控第8页background-position属性background-pos
ition属性用于设置背景图像(由background-image属性定义)的起始位置，背景图像如果要重复，将从这一位置开始。HTML+CSS+JavaScript网页设计第9章高级CSS操控background-size属性background
-size属性用于控制背景图像的尺寸，这是CSS3引入的新属性，在未CSS3之前，无法控制背景图像的尺寸，只能事先把背景图像剪裁为适合的大小。►length：设置背景图像的高度和宽度，包括两个值，第一个值设置宽度，第
二个值设置高度；如果只设置一个值，第二个值会被设置为auto。►percentage：以父元素的百分比来设置背景图像的宽度和高度，包括两个百分比数值，第一个值设置宽度，第二个值设置高度；如果只设置一个值，第二个值会被设置为auto。►cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区
域。背景图像的某些部分也许无法显示在背景区域内。►contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。第9页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-origin属性background-origin属性
规定background-position属性相对于什么位置来定位。如果背景图像的background-attachment属性为fixed，那么该属性不生效。►padding-box指定背景图像相对于内边距框来定
位►border-box指定背景图像相对于边框盒来定位►content-box指定背景图像相对于内容框来定位第10页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-repeat属性background-repe
at属性规定了图像的平铺模式。该属性设置是否以及如何重复背景图像。►repeat：默认。背景图像将在垂直方向和水平方向上重复。►repeat-x：背景图像将在水平方向上重复。►repeat-y：背景图像将在垂
直方向上重复。►no-repeat：背景图像将仅显示一次。第11页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-clip属性background-clip属性用于规定背景的绘制区域
。该属性的可取值与background-orign属性的可取值相同。表示背景图像被剪裁到相应的边框处。第12页HTML+CSS+JavaScript网页设计第9章高级CSS操控background-attachmen
t属性background-attachment属性用于设置背景图像是否固定或随着页面的其余部分滚动。该属性有两种取值：►scroll：默认值，背景图像会随着页面其余部分的滚动而移动；►fixed：当页面的其余部分滚动时，背景图像不会移动。
第13页HTML+CSS+JavaScript网页设计第9章高级CSS操控第14页主要内容9.1设置元素的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+Java
Script网页设计第9章高级CSS操控9.2边框与边距默认情况下，HTML中的很多元素都是没有边框的，有的时候，为了使页面布局更美观，需要为元素添加合适的边框，并调整元素内容到边框的距离。第15页HTML+CSS+JavaScript网页设计第9章高级CSS操控第16页盒子
模型“盒子模型”(boxmodel)是CSS中一个很重要的概念，因为它决定了元素在浏览器窗口中如何定位。其因CSS处理每个元素都好像元素位于一个盒子中而得名。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。每个盒子都有3个重要的属性，HTML+CSS+JavaScript网页设计第9章高级CSS操控第17页border属性border属性用来指定代表某一元素的盒子的边框应如何呈现。一个边框具有3个可以修改的属性：►border-color属
性：指定边框应具有的颜色►border-style属性：指定边框应为实线、虚线还是双股线，或者其他可能的取值►borer-width属性：指定边框应具有的宽度HTML+CSS+JavaScript网页设计第9章高级CSS操控第
18页padding属性padding属性用来指定元素内容与边框之间的距离，也叫做内边距。该属性的值通常使用像素指定，也可以使用任何之前介绍过的长度单位、百分比或关键字inherit。如果使用了百分比，则以包含盒子的百分比计算，
如果指定为10%，则每一边取盒子的5%作为内边距。元素的内边距默认不会继承，因此如果<body>元素有一个值为50像素的padding属性，它不会自动应用于其内部的所有其他元素。只有padding属性值为inherit的元素才会继承父元素的内边距。与边框一样，也可以使用如下属
性分别指定盒子内每一边的不同内边距大小：padding-bottom、padding-top、padding-left和padding-right。HTML+CSS+JavaScript网页设计第9章高级CSS操控第19页margin属性
margin属性用来控制盒子之间的空间。它的取值可以是长度、百分比或者inherit，取值的含义与padding属性完全相同。也可以使用如下属性为盒子的每一边分别设置不同的外边距大小：margin-bottom、margin-top、margin-left和margin-right。HTML
+CSS+JavaScript网页设计第9章高级CSS操控第20页border-radius属性为了美化网页，经常会将元素的边框设计为圆角矩形。在CSS2.1中，为元素实现圆角边框效果是很头疼的一件事。为了简化这一功能，CSS3引入了一个新的属
性：border-radius。和前几个属性类似，可以使用border-radius属性分别设置4个角的圆角效果的半径，也可以为每个角单独设置，对应的4个属性分别是：border-top-left-ra
dius(左上角)、border-top-right-radius(右上角)、border-bottom-right-radius(右下角)和border-bottom-left-radius(左下角)。HTML+CSS+JavaScript网页设计第9章高级CSS操控第21页b
order-radius属性一个值：所有四个角都有相同的半径。两个值：第一个值是左上角和右下角，第二个值是右上角和左下角。三个值：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角。四个值：依次是左上角、右上角、
右下角和左下角。HTML+CSS+JavaScript网页设计第9章高级CSS操控第22页border-image属性CSS3引入了border-image属性来为边框添加背景图片。边框图像可以由单幅图像创建，该图像可以在元素周边的边框中沿着不同的轴向进行裁切或拉伸，
换句话说，图像被4条线分成9个切片，如图9-7所示。4个角切片用于创建元素边框的4个角，剩下的4个边切片由border-image用来填充元素边框的4条边。然后可以指定切片的宽度以及是否希望这些切片平铺或拉伸以填满元素边的全部长度上。如果中间的切片不为空，就会填充border-image
所应用的元素的背景。HTML+CSS+JavaScript网页设计第9章高级CSS操控第23页border-image属性前面提到的边框平铺方式有4个选项，我们可以针对平铺指定两个值：第一个值用于水平方向的边
框，第二个值用于垂直方向的边框。这4个选项的含义如下：►round：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会对图像进行相应的缩放。►stretch：图像会被拉伸，直至填满整个区域。►repea
t：图像会进行平铺，直至填满整个区域。►space：图像会进行平铺，直至填满整个区域。如果平铺之后切片的数目与区域不匹配，就会调整图像之间的间距以填满整个区域。HTML+CSS+JavaScript网页设计第9章高级CSS操控box-shadow属性
box-shadow属性也是CSS3新增的属性，box-shadow属性有点类似于上一章学习的text-shadow属性，text-shadow属性是为文本设置阴影，而box-shadow属性是为对象实现图层阴影效果。text-shadow属性一样，box-s
hadow也可以使用一个或多个投影。使用多个投影时，属性值是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的inset关键字来规定，省略长度的值是0。第24页HTML+CSS+JavaScript网页设计第9章高级CSS操控第25页主要内容
9.1设置元素的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第26页9.3变形处理CSS3新增了transform属性，可以实现文字或图像的
变形操作，主要包括旋转、倾斜、缩放和移动4种类型的变形处理。该属性接受一个或者多个由空格分隔的应用于元素的变形函数HTML+CSS+JavaScript网页设计第9章高级CSS操控第27页旋转旋转通过rotate函数来实现，在旋转之前可以
使用transform-origin属性定义旋转的基点。rotate()的参数是旋转角度，可以是正值或负值，设置为正值，表示顺时针旋转；设置为负值，表示逆时针旋转。在三维变形中，还有3个旋转函数：rotateX()、rotat
eY()和rotateZ()，可以让元素在任何轴上旋转。rotateX()函数允许元素围绕X轴旋转；rotateY()函数允许元素围绕Y轴旋转；rotateZ()函数允许元素围绕Z轴旋转。这3个函数的参数也是旋转的角度，同样，为正值，元素围绕相应的轴顺时针旋转；为负值，逆时针旋转。HTM
L+CSS+JavaScript网页设计第9章高级CSS操控第28页旋转rotateX()、rotateY()和rotateZ()可以看成是rotate3d()函数的一个特例：rotateX(a)函数的功能等同于rotate3d(1,0,0,
a)；rotateY(a)函数的功能等同于rotate3d(0,1,0,a)；rotateZ(a)函数的功能等同于rotate3d(0,0,1,a)HTML+CSS+JavaScript网页设计第9章高级CSS操控第29页倾斜倾斜也叫
扭曲，通过skew函数来实现。skew函数可以带一个或两个参数，只有一个参数的skew函数会使元素在水平方向上(X轴)扭曲，如果有第二个参数的话，那么第二个值控制元素在垂直方向上(Y轴)扭曲。另外两个函数
skewX()和skewY()则分别使元素仅在水平方向扭曲和仅在垂直方向扭曲。HTML+CSS+JavaScript网页设计第9章高级CSS操控第30页缩放对元素的缩放通过scale()函数来实现。它接受无单位的数字为参数，scal
e(1)就是元素的默认尺寸。小于1的值使元素变小，所以scale(0.5)将元素的尺寸缩小为原来的一半，相反，大于1的值使元素变大，所以scale(2)将元素的尺寸放大到原来的两倍。如果参数值为负，则进行反转
。也可以指定两个参数scale(x,y)，使元素在水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；或者使用scaleX(x)函数，仅在水平方向缩放，scaleY(y)仅在垂直方向缩放，它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1。HTML
+CSS+JavaScript网页设计第9章高级CSS操控第31页3D缩放对于元素的3D缩放，还有scaleZ(sz)和scale3d(sx,sy,sz)两个函数。当scale3d()中的X轴和Y轴同时为1(即scale3d(1,1,sz))时，其效果等同于scaleZ(s
z)。scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他变形函数一起使用才会有效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第32页移动元素的移动通过translate函数来实现，元素从其当前位置移动，根据给定的位
置参数(x坐标和y坐标)沿着X轴、Y轴移动。也可有使用translateX(x)仅在水平方向移动(X轴移动)；或者使用translateY(Y)仅在垂直方向移动(Y轴移动)。另外，还有translateZ()和translate3d()两个
函数用于元素的3D位移操作。HTML+CSS+JavaScript网页设计第9章高级CSS操控第33页移动3D位移处理的特点是：使用三维向量的坐标定义元素在每个方向移动多少。在translate3d()函数中，X、Y、Z
轴上的变化规律是：►X轴：从左向右移动►Y轴：从上向下移动►Z轴：以方框中心为原点变大当Z轴的值越大时，元素离观看者越近，从视觉上元素就变得更大；反之，值越小时，元素也离观看者更远，从视觉上元素就变得更小。HTML+CSS+JavaScript网页设计第9章高级CSS操
控第34页主要内容9.1设置元素的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第35页9.4设计动画
一些CSS属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。CSS3中的动画功能主要包括Transitions和Animations，这
两种功能都可以用来制作动画效果。其中，Transitions功能支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画；Animations功能支持通过对关键帧的指定来在页面上产生更复杂的动画效果，以方便制作逐帧
动画。HTML+CSS+JavaScript网页设计第9章高级CSS操控第36页过渡动画CSSTransformation呈现的是一种变形效果，而CSSTransition呈现的是一种过渡效果，就是一种动画转换过程，如渐显、渐弱、动画快慢等。CSSTransformation和CSSTr
ansition是两种不同的动画模型，因此，W3C为动画过渡定义了单独的模块。W3C标准中对CSS3Transition是这样描述的：“CSSTransition允许CSS的属性值在一定的时间区间内平滑过
渡。这种效果可以在鼠标单击、获得焦点、被单击或对元素的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”HTML+CSS+JavaScript网页设计第9章高级CSS操控第37页过渡动画过渡可
以与变形同时使用。例如，触发:hover或:focus事件后创建动画过程，诸如淡出背景色、滑动一个元素以及让一个对象旋转等都可以通过CSS转换来实现。►transition-property：执行变换的属性►transition-duration：
变换延续的时间►transition-timing-function：在延续时间段，变换的速率变化►transition-delay：变换延迟时间HTML+CSS+JavaScript网页设计第9章高级CSS操控第38页定义过渡属
性transition-property属性用来定义转换动画的CSS属性名称，如background-color属性。即指定在元素的哪个属性发生改变时执行过渡效果，主要有以下几个值：none(没有属性
改变)；all(所有属性改变)，这也是默认值；indent(元素属性名)。当值为none时，过渡马上停止执行。当值为all时，元素产生任何属性值变化时都执行过渡效果。indent可以是指定元素的某个属性值HTML+CSS+JavaScript网页设计第9章高级CSS操控第39页定义过渡属
性具体什么属性可以实现过渡效果，在W3C官网上列出了所有可以实现过渡效果的CSS属性值以及值的类型，大家可以到官网了解详情。需要注意的是，并不是所有的属性改变都会触发过渡效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发过渡效果。但上面所列的属性类型发生改变
都会触发过渡效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第40页定义过渡时间transition-duration属性用来指定元素过渡效果的持续时间，即设置从旧属性换到新属性所花费的时间，单位为秒。该属性适用于所有元素以及:before和:af
ter伪元素。默认情况下，动画过渡时间为0秒，所以【例9-9】中看不到过渡的效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第41页定义过渡延迟时间transition-delay属性用来指定动画开始前的等待时间，单位为s(秒)或ms(毫秒)，也就是在改
变元素属性值后多长时间开始执行过渡效果。transition-delay的用法和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。默认值为0，也就是变换立即执行，没有延迟。HTML+CSS+Jav
aScript网页设计第9章高级CSS操控第42页定义过渡效果transition-timing-function属性用来指定切换效果的变换速率，也就是定义过渡动画的效果，该属性有6个可能的值：►ease：过渡效果逐渐变慢，为默认值，ease函
数等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。►linear：匀速过渡效果，linear函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。►ease-in：加速过渡效果，ease-in函数等同于贝塞尔曲线(0.42,0,1.0,1.0)。►ease-out：减速过渡效果，eas
e-out函数等同于贝塞尔曲线(0,0,0.58,1.0)。►ease-in-out：过渡效果首先是加速，然后减速，ease-in-out函数等同于贝塞尔曲线(0.42,0,0.58,1.0)。►cubic-bezier：允许自定义一条时间曲
线，即特定的cubic-bezier曲线。(x1,y1,x2,y2)中的4个值特定于曲线上的点P1和点P2。所有值必须在[0,1]区域内，否则无效。HTML+CSS+JavaScript网页设计第9章高级CS
S操控第43页关键帧动画过渡动画只能使元素产生基本的运动，CSS动画规范(http://j.mp/css3-animations,http://dev.w3.org/csswg/css3-animations/)用基于关键帧的动画使运动效果更进一步。关键帧的概念
来源于传统的卡通片制作。关键帧相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现
更复杂的动画效果。HTML+CSS+JavaScript网页设计第9章高级CSS操控第44页关键帧动画关键帧动画的定义方式比较特殊，它使用了一个关键字@keyframes来定义动画。具体格式如下：►@keyframes动画名称{时间点{元素状
态}时间点{元素状态}…}一般来说，0%和100%这两个关键帧是必须要定义的。0%可以由from代替，100%可以由to代替。HTML+CSS+JavaScript网页设计第9章高级CSS操控第45页关键帧动画每一个关键帧规则的开始都是
一个百分比值或者from(相当于0%)与to(相当于100%)这两个关键字之一，它指定了关键帧在动画的何处出现。百分比值表示动画持续时间的百分比，所以一段2秒动画中的50%关键帧出现于动画的1秒处。定义好一个关键帧动画后，可以使用anima
tion属性把这个动画绑定到某个要进行动画的元素上就能实现关键帧动画了。HTML+CSS+JavaScript网页设计第9章高级CSS操控第46页关键帧动画animation就相当于用@keyframes预先定义好元素在整个过渡过程中将要经历的各个
状态，然后再通过animation属性将这些状态一次性赋给该元素。animation属性是一个复合属性，包含animation-name、animation-duration、animation-timing-function、animation-delay、animation-iterat
ion-count、animation-direction、animation-fill-mode和animation-play-state子属性值。HTML+CSS+JavaScript网页设计第9章高级CSS操控第47页创建关键字动画animation-name属性用来定义动
画的名称，该名称就是使用@Keyframes关键字创建的动画名，如果要为同一个元素应用多个动画，该属性值也可以是一个用逗号“,”分隔的动画名称列表。与过渡动画类似，仅指定动画名称还不能看到动画效果，至少
还需要使用animation-duration属性指定播放动画持续的时间，单位为s(秒)，默认值为0。这个属性和transition属性的transition-duration子属性的使用方法一样。HTML+CSS+Ja
vaScript网页设计第9章高级CSS操控第48页动画播放方式和延迟时间animation-timing-function属性和transition-timing-function的使用方式相同，并且接
受的所有值也相同，它用来控制动画的播放方式。animation-delay属性和transition-delay属性的使用方法一样，它用来指定动画延迟播放时间，属性值为数值，单位为s(秒)，默认值也是0。HT
ML+CSS+JavaScript网页设计第9章高级CSS操控第49页动画播放次数和方向animation-iteration-count属性用来指定播放动画的循环次数，默认值为1；infinite为无限次数循环。an
imation-direction属性用来指定动画播放的方向，可以取值有如下4个：►normal：表示动画按正常顺序播放，这也是该属性的默认值。►reverse：表示动画反向播放。►alternate
：动画在奇数次(1、3、5...)正向播放，在偶数次(2、4、6...)反向播放。►alternate-reverse：动画在奇数次(1、3、5...)反向播放，在偶数次(2、4、6...)正向播放。HTML+CSS+JavaScript网页设计第9章高级CSS操控第50页
暂停播放动画animation-play-state属性可以用来暂停播放动画，该属性有两个值：running和paused。默认值为running，当该值设置为paused时，将暂停正在播放的动画，如果之后值再次改为running，那
么动画就会从其暂停之处继续播放。HTML+CSS+JavaScript网页设计第9章高级CSS操控控制元素在动画前后的表现动画与CSS变形不同，默认情况下它会在动画结束时返回到其原有的样式，这是因为ani
mation-fill-mode属性的默认值是none，该属性用来控制当动画不播放时，要应用到元素的样式。除了默认值none，该属性还有如下3个可取值：►forwards：产生动画的元素会保持最后一个关键帧的属性，通常是100%或to关键帧，但是如果指定了animat
ion-iteration-count和animation-direction就不总会产生这样的效果了。►backwards：动画将应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值。当animation-direction为normal或alterna
te时，使用from关键帧中定义的属性值；当animation-direction为reverse或alternate-reverse时，使用to关键帧中的值。►both：它是forwards和backwards表现的组合。也就是说，动画会在两个方向上扩展动画属性。第5
1页HTML+CSS+JavaScript网页设计第9章高级CSS操控第52页主要内容9.1设置元素的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第53页9.5本章小结本章主
要介绍了CSS控制HTML网页呈现的高级操作，包括设置元素背景、边框和边距、元素的变形处理以及CSS动画。首先介绍的是如何设置元素的背景，可以直接使用background属性一次设置多个子属性的值，也可以单独设置每个子属性；然后讲述了边框和边距的设置，包括盒子模型的基本概念、border
属性、padding、margin属性以及CSS3新增的几个特殊边框效果的属性border-radius、border-image和box-shadow等；接下来学习的是CSS的变形处理，主要包括旋转、倾斜、缩放和移动4种类型的变形；最后讲述了CSS的动画，CSS3中的动画功能主
要包括过渡动画和关键帧动画两种，过渡动画支持从一个属性值平滑过渡到另一个属性值，方便用来制作颜色渐变和形状渐变动画，关键帧动画是通过对关键帧的指定来在页面上产生更复杂的动画效果，以方便制作逐帧动画。HTML+CSS+JavaScript网页设计第9章高级CSS操控第5
4页主要内容9.1设置元素的背景9.2边框与边距9.3变形处理9.4设计动画9.5本章小结9.6思考和练习HTML+CSS+JavaScript网页设计第9章高级CSS操控第55页9.6思考和练习1.属性能够为任何元素背景指定一个单一实体色。2.如果
同时使用background-image属性与background-color属性，则属性拥有优先权。3.“盒子模型”(boxmodel)是CSS中一个很重要的概念，因为它决定了元素在浏览器窗口中如何定位，每个盒子都有3
个重要的属性、和。4.使用border-radius属性时，可以省略部分值，省略时采用什么原则？不同数目的值对边框的角产生的影响如何？5.CSS3新增的属性，可以实现文字或图像的变形操作，主要包括旋转、、和移动4种类型的变形处理。6.元素的移动通过函数来实现。7.在CSS
3中，过渡动画通过哪个属性来实现？
辽公网安备 21102102000191号
营业执照
