HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 范玉玲 第4、5章 盒模型与网页布局、CSS特效

第4章盒模型与网页布局《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents4.1盒模型4.2浮动与定位4.3布局策略盒模型4.1盒子模型盒子模型就是把HTML页面中的元素视为一个矩形区域，即元素的盒子。盒子由margin（外边距）、border（边框）、padding（内边距）和content（内容）4部分组成：盒子的各属性空白区margin外边缘边框区border内边缘边框边椽内容区content填充区padding填充边椽其中内边缘和外边缘并不会显示在浏览器中盒子模型假如有一例，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：盒子模型通过添加一些颜色及字体信息，该例可以有以下显示效果：这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图：盒子模型使用width和height属性指定元素内容区的宽和高这两个属性能应用于块级别和无文本的内嵌元素，不能应用于内嵌文本（也叫不可替换的）元素属性名称：width属性值：长度计量值|百分比值|auto属性名称：height属性值：长度计量值|百分比值|auto单位：em、像素和百分比值是最常用的度量元素大小的方法内容区contentwidthheight举例(width-height)盒子模型—内容区overflow属性来指定如何处理内容不适合的问题。属性名称：overflow属性值：visible|hidden|scroll|auto默认值：visible适用对象：块级别元素和可替换的内嵌元素(比如img)举例(overflow)盒子模型—处理溢出盒子设置得太小，容不下内容怎么办？盒子模型--margin属性描述margin简写属性，在一个声明中设置所有外边距（上、右、下、左）margin-top设置元素的上外边距margin-right设置元素的右外边距margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin相关的属性CSS中主要使用margin属性来控制元素边界与网页其他内容的水平和垂直间距。距离可以为具体数字或百分比。举例(margin)盒子模型--marginmargin设置外边距：/*

设置上边距为25px、右边距为50px、下边距为75px、左边距为100px*/margin:25px50px75px100px;/*

设置上边距为25px、左右边距为50px、下边距为75px*/margin:25px50px75px;/*

设置上下边距为25px、左右边距为50px*/margin:25px50px;/*

设置4个方向的边距都为25px*/margin:25px;设置外边距的书写方式依次顺时针应用于上、右、下、左。盒子模型--padding属性描述padding简写属性，在一个声明中设置所有内边距（上、右、下、左）padding-top设置元素的上内边距padding-right设置元素的右内边距padding-bottom设置元素的下内边距padding-left设置元素的左内边距padding相关的属性CSS中主要使用padding属性定义元素边框与元素内容之间的空间，即上下左右的内边距。举例(padding)盒子模型各属性四个方位margin清除周围的（外边框）元素区域。margin没有背景颜色，是完全透明的。当元素的padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。盒子模型在网页制作时，关于多个盒子之间需要注意的问题，具体如下。1、相邻块级元素的垂直外边距合并：以上下相邻的块元素为例，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。外边距合并盒子模型在网页制作时，关于多个盒子之间需要注意的问题，具体如下。2、嵌套块级元素的垂直外边距合并：如果父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。外边距合并盒子模型内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：*{

margin:0;

padding:0;

}举例(默认外边距)（外边距为0）盒子模型通常，块元素的宽和高由浏览器自动计算。它会跟浏览器窗口或其他块元素容器一样宽，高度正好容纳内容，也可以使用width和height属性设置元素内容区域为一个特定值，em、像素和百分比值是最常用的度量元素大小的方法。注意：宽和高只应用到内容区域元素框的总宽度=2*填充+2*边框+2*空白边+宽度元素框的总高度=2*填充+2*边框+2*空白边+高度一般不指定元素的高度，允许其基于文本和其他内容自动计算，如果指定高度，请确保考虑到内容不适用的情况。盒子模型#box{width:70px;

margin:10px;

padding:5px;}假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。盒子模型Div的高度？高度由内容决定。元素的总高度和宽度包含内边距和边框(padding与border)content-box

是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。border-box

告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border+padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。box-sizing盒子模型浮动与定位4.2CSS有三种基本的定位机制：普通流、浮动和定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在(X)HTML中的位置决定。浮动定位CSS布局模型中，文本元素依源码中的顺序从上到下排列，然后从左到右。块元素一个累一个，填满浏览器窗口或其他窗口元素的所有可用宽度。内嵌元素和文本字符一行接一行的填满块元素。当窗口或窗口元素重置大小的时候。块元素随着新宽度增大或缩小。内嵌内容重新流动来适应宽度。举例(普通流)普通流浮动定位属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）float的常用属性值CSS的浮动和定位可以改变元素的排列方式，使网页内容变得丰富多彩。CSS的浮动可以通过float属性进行设置。举例imgfloat浮动浮动定位当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘举例float2举例float1浮动浮动定位当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。举例float3浮动浮动定位如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。举例float4

float5

浮动浮动定位浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像。举例float6

float7

float8

浮动浮动定位clear属性（清除浮动）：阻止行框围绕浮动框，取消文本环绕，恢复平常布局,可通过元素下面开始排列的元素来完成。防止元素紧接着浮动元素出现，并强制它从下一个可用的浮动元素下面的空间开始。举例float9

float10清除浮动浮动定位属性值：left|right|both|none|inherit默认值：none应用对象：仅块级元素举例layoutcollapseCSS允许任何元素浮动，不论是列表、段落还是图像。无论元素先前是什么状态，浮动后都成为块级元素，浮动元素的宽度缺省为auto。浮动元素的外边缘不会超过其父元素的内边缘。如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块（没有足够的空间），则它下降到低于先前任何浮动元素的位置，即换行显示。浮动特点浮动浮动定位属性值描述static静态定位（默认定位方式）relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相当于static定位以外的第一个上级元素进行定位fixed固定定位，相对于浏览器窗口进行定位设置定位方式的常用属性值position属性可以让网页中的某个元素在网页的特定位置出现，如弹出菜单。定位浮动定位属性值描述top顶端偏移量，定义元素相对于其参照元素上边线的距离bottom底部偏移量，定义元素相对于其参照元素下边线的距离left左侧偏移量，定义元素相对于其参照元素左边线的距离right右侧偏移量，定义元素相对于其参照元素右边线的距离设置元素具体位置的常用属性值确定了定位方法后，真正要做的是指定四个偏移属性。定位浮动定位#box_relative{position:relative; left:30px;/*距左边线30px*/top:20px;/*距顶部边线20px*/}相对定位方式基本语法格式相对定位是相对于元素在流中的原始位置移动；它将保留元素在普通流中占据的空间，并继续影响周围内容的布局。说明：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。举例(relative)定位-相对定位浮动定位绝对定位#box_absolute{position:absolute; left:30px; /*距左边线30px*/top:20px;/*距顶部边线20px*/}绝对定位方式基本语法格式绝对定位的元素从文档流中完整的移除，并且相对于最近的容器块定位它所占据的空间将被关闭。它对周围元素的布局没有任何影响。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。举例(absolute)层叠顺序层叠是当一个父元素中的多个子元素同时被定位时，定位元素之间有可能会发生：定位元素发生重叠举例(zindex)层叠顺序显示器显示的图案是一个二维平面，使用x轴和y轴来表示位置属性。二维平面z-index属性表示Z轴的深度，它表示三维立体的概念，多个定位子元素的上下层的立体关系。用来控制定位元素在垂直于显示屏方向（z轴）上的堆叠顺序。三维空间举例(zindex)层叠顺序层叠发生时其覆盖关系遵循：谁大谁上：值大的元素发生层叠时会在值小的元素上面，其取值可为正整数、负整数和0，默认值为0。z-index值越大的元素越靠近用户。后来居上：当元素的层叠水平一致，层叠顺序相同的时候，处于后面的元素会覆盖前面的元素。举例(zindex)布局策略4.3液态网页：也称流动布局，在不同分辨率/浏览器屏幕宽度下，页面内容保持满屏，就像液体一样充满了屏幕。固定网页：将内容放在一个保持指定元素宽的网页区域内，而不管浏览器的尺寸。弹性布局：这种布局模式可以为盒状模型提供最大的灵活性。弹性盒子中的子元素能在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。布局策略液态布局，也称流动布局。特点：网页区域和栏可变宽窄，从而填充浏览器窗口中的可用空间。文本允许按区域宽度重新流动。如何创建液态布局通过指定百分比值宽度或不指定，来创建液态布局举例(liquid1)(liquid2)液态布局优势劣势不需要为具体的浏览器分辨率而设计。文本填满窗口，从而避免了潜在、笨拙的空白空间。在大的浏览器中，行长太长且不适于阅读。它们很难预计。在极端尺寸的浏览器中元素可能太开阔或太拥挤。液态布局优劣比较固定布局：宽度固定在具体像素上选择固定布局需要决定的两件事：选择网页宽度：通常基于普通浏览器分辨率，多数都设计为1024px，1280px。决定固定宽度布局将处于浏览器窗口的什么位置如何创建固定布局通过用像素单位指定width属性值来创建固定宽度布局通常，将整个网页内容放到1个div元素中，并设置具体像素值；各栏元素的宽度也用像素值表示举例(fixed1)(fixed2)(fixed3)(auto)固定布局优势劣势布局可预计。对行长提供更好的控制。如果浏览器窗口比网页窄，右边的内容将被隐藏。如果用户调整字体尺寸，文本元素仍会重新流动，所以不会保证布局完全保持不变。文本字体尺寸非常大时，行长将会短得难用。固定布局优劣比较布局的传统解决方案，基于盒状模型，依赖

display属性+

position属性+

float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。flex布局将成为未来布局的首选方案。flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。举例(flex1)弹性布局弹性布局弹性盒既不使用浮动，也不会合并弹性盒容器与其内容之间的外边距，是一种非常灵活的布局方法，它可以轻松地创建响应式网页布局。弹性盒结构iOSSafariAndroidBrowserIEOperaChromeFirefox7.0+4.4+11+12.1+21+22+弹性盒模型浏览器支持情况弹性布局弹性盒提供了一些常用的属性，使用弹性盒场景如下：首先需要使用display属性来指定外部父元素容器的类型为弹性盒容器；可以使用flex-flow属性是来排列弹性子元素的排列方向。还可以利用属性来设置子元素在主轴方向的排列方式。弹性布局display属性display属性取值：默认值为inline，用于指定元素容器的类型，此元素会被显示为一个内联元素，在元素前后没有换行符；如果设置display的值为flex，则表示用于指定弹性盒的容器；如果设置display的值为none，则表示隐藏该元素。弹性布局任何一个容器都可以指定为Flex布局。弹性布局.box{

display:flex;

}.box{

display:inline-flex;

}.box{

display:-webkit-flex;/*webkit内核的浏览器要加上-webkit前缀*/

display:flex;

}注意，设为flex布局以后，子元素的float、clear和vertical-align属性将失效。举例(flex1)采用Flex布局的元素，称为Flex容器（flexcontainer），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称”项目”。弹性布局容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的开始位置（与边框的交叉点）叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。项目默认沿主轴排列。单个项目占据的主轴空间叫做mainsize，占据的交叉轴空间叫做crosssize。STEP01display属性的应用新建demo01.html文件，编写HTML代码。<body><divclass="box"><divclass="one">one</div><divclass="two">two</div><divclass="three">three</div></div></body>弹性布局demo01STEP02父容器div.box设为弹性盒容器在demo01.html文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;}.boxdiv{background-color:white;border:1pxsolidgray;margin:2px;}</style>弹性盒容器弹性布局demo01弹性盒布局STEP03运行程序在浏览器中查看demo01.html文件运行效果。弹性布局弹性容器的属性包括：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content弹性布局弹性布局-flex-directionflex-direction属性决定主轴的方向（即项目的排列方向）。举例(flex-direction)默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义如果一条轴线排不下，如何换行。flex-wrap属性不起作用的情况：如果元素不是弹性盒对象的元素。弹性布局-flex-wrap举例(flex-wrap)弹性布局-flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。.box{

/*主轴方向是水平逆向，换行方式是从上到下*/ flex-flow:row-reversewrap;}举例(flex-flow)STEP04修改div.box元素的样式将刚才的demo01.html存为demo02.html，在demo02.html文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;/*height:80px;*//*将高度注释起来*/flex-flow:column;}/*原代码

*/</style>弹性布局-flex-flowdemo02flex-flow取值为columnSTEP05运行程序在浏览器中查看demo02.html文件运行效果。弹性布局-flex-flowdemo02弹性布局-justify-contentjustify-content属性定义了项目在主轴上的对齐方式。space-around弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。space-between弹性盒子元素会平均地分布在行里，第一个元素的边界与行的起始位置对齐，最后一个元素与行结束位置的边距对齐举例(justify-content)STEP06修改div.box元素的样式将demo01继续修改为demo03.html，在文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*flex-flow:column;*/justify-content:space-between;}/*原代码

*/</style>弹性布局-justify-contentdemo03justify-content取值space-betweenSTEP07运行程序在浏览器中查看demo03.html文件运行效果。弹性布局-justify-contentdemo03STEP08修改div.box元素的样式保存demo03.html为demo04.html，文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*flex-flow:column;*/justify-content:space-around;}/*原代码

*/</style>弹性布局-justify-contentdemo04justify-content取值space-aroundSTEP09运行程序在浏览器中查看demo04.html文件运行效果。弹性布局-justify-contentdemo04弹性布局-align-itemsalign-items定义了项目在交叉轴上如何对齐。举例(align-items)STEP10修改div.box元素的样式在demo05.html文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*justify-content:space-around;*/align-items:center;}/*原代码

*/</style>弹性布局-align-itemsdemo05align-items取值centerSTEP11运行程序在浏览器中查看demo05.html文件运行效果。弹性布局-align-itemsdemo05STEP12修改div.box元素的样式在demo06.html文件中编写CSS样式代码。<styletype="text/css">.box{display:flex;background-color:#999;height:80px;/*justify-content:space-around;*/align-items:flex-end;}/*原代码

*/</style>弹性布局-align-itemsdemo06align-items取值flex-endSTEP13运行程序在浏览器中查看demo06.html文件运行效果。弹性布局-align-itemsdemo06弹性布局-align-contentalign-content用来设置多个元素组成的容器内的对齐方式，其属性定义了多根轴线的对齐方式。举例(align-content)弹性布局-项目属性弹性项目的属性包括order、flex-grow、flex-shrink、flex-basis、flex弹性布局-order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。举例orderSTEP14设置div.box容器中的子元素one、two、three的order值在demo07.html文件中编写CSS样式代码。<style>.one{order:3;}.two{order:1;}.three{order:2;}</style>弹性布局-order属性demo07给子元素设置order值STEP15运行程序在浏览器中查看demo07.html文件运行效果。弹性布局-order属性demo07弹性布局-flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。举例flex-grow如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。弹性布局-flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。举例flex-grow.flex2{display:flex;width:600px;margin:0;padding:0;list-style:none;}.flex2li:nth-child(1){width:200px;}.flex2li:nth-child(2){flex-grow:1;width:50px;}.flex2li:nth-child(3){flex-grow:3;width:50px;}<ulclass="flex1"><li>项目1</li><li>项目2</li><li>项目3</li></ul>flex2容器的剩余空间宽度为600-200-50-50=300px。项目1：因为没有设置flex-grow，所以宽度依然为200px。项目2：50+(300/4×1)=125px。项目3：50+(300/4×3)=275px。弹性布局-flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。举例flex-shrink.flex2{display:flex;width:400px;margin:0;padding:0;list-style:none;}.flex2li{width:200px;}.flex2li:nth-child(3){flex-shrink:3;}剩余宽度为400-600=-200px，那么超出的200px需要被子项目消化。通过收缩因子，所以加权综合可得200×1+200×1+200×3=1000px，那么项目1、项目2、项目3将被移除的溢出量如下所示。项目1：(200×1/1000)×200，即约等于40px。项目1的实际宽度为200-40=160px。项目2：(200×1/1000)×200，即约等于40px。项目2的实际宽度为200-40=160px。项目3：(200×3/1000)×200，即约等于120px。项目3的实际宽度为200-120=80px。弹性布局-flex-basis属性flex-basis属性用来设置元素的宽度。如果元素同时设置了width和flex-basis，那么flex-basis会覆盖width的值。举例题目二题目三第5章CSS特效《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents5.1滤镜5.2过渡5.3动画5.4转换5.45.5项目滤镜5.15.1滤镜CSS3的滤镜（filter）属性提供了模糊和改变元素颜色的功能，常用于调整图像的渲染、背景或边框显示效果。多个滤镜之间用空格隔开。

filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();5.1滤镜filter的属性属性值描述属性值描述grayscale灰度opacity透明度sepia褐色brightness亮度saturate饱和度contrast对比度hue-rotate色相旋转blur模糊invert反色drop-shadow阴影urlurl函数接收一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter:url(svg-url#element-id)#romance

{

-webkit-filter:

grayscale(100%);

/*Chrome,Safari,Opera*/

filter:

grayscale(100%);}举例（filter-grayscale）灰度grayscale()grayscale()用于将图像转换为灰度图像。grayscale()参数值为0～1的小数，也支持0%～100%百分比的形式。如果没有任何参数值，默认将以“100%”渲染。#romance{-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);}举例（filter-blur）模糊blur()blur()用于给图像设置高斯模糊。参数值设置为高斯函数的标准差，或者是屏幕上以多少像素融在一起，因此值越大越模糊。#romance{-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);}举例（filter-brightness）brightness()用于调整图像的亮度，默认值为100%或者1。如果其值超过100%，就意味着图片拥有更高的亮度。如果值是0%，图像会全黑。值是100%，则图像无变化。亮度brightness()#romance{-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);}举例（filter-contrast）调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。超过100％的值将提供更具对比度的结果。若没有设置值，默认是1。对比度contrast()drop-shadow()用于给图像设置一个阴影效果。<offset-x><offset-y>（必选）：<offset-x>可设置水平方向的距离，负值会使阴影出现在元素的左边；<offset-y>可设置垂直方向的距离，负值会使阴影出现在元素的上方。如果两个值都是0,则阴影出现在元素正后方。<blur-radius>（可选）：值越大，越模糊，则阴影会变得更大更淡。不允许负值，若未设置，默认值为0（阴影的边界很锐利）。<spread-radius>（可选）：正值会使阴影扩张或变大，负值会使阴影缩小。若未设置，默认值为0（阴影会与元素一样大小）。<color>（可选）：若未设置该属性，颜色值将根据浏览器的默认设置来进行显示。举例（drop-shadow）#romance{ filter:drop-shadow(15px15px8px#222);}阴影drop-shadow()filter:drop-shadow(30px10px4px#4444dd);filter:drop-shadow(0-6mm4mmrgb(160,0,210));filter:drop-shadow(000.75remcrimson);举例（drop-shadow）阴影drop-shadow()这个函数有点类似于box-shadow属性。box-shadow属性在元素的整个框后面创建一个矩形阴影，而drop-shadow()过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。Tipdrop-shadow和box-shadow相似，都是实现投影效果,它们有什么区别呢？box-shadow阴影可以任意叠加，drop-shadow不能阴影叠加，但是它是真正意义上的投影！而box-shadow只是盒阴影而已。举例（box-shadow3）（box-shadow4）（区别1）（区别2）阴影drop-shadow()#romance90{-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90deg);}#romance180{-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);}#romance270{-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);}举例（filter-hue-rotate）hue-rotate()设置图像应用色相旋转。取值为0deg，则图像无变化。若值未设置，默认值为0deg。该值没有最大值，超过360deg时相当于又绕一圈。色相旋转hue-rotate()#romance{-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/filter:invert(100%);}举例（filter-invert）invert反色会把图片变成底片的感觉值为100%是完全反转值为0%则图像无变化反相invert()#romance{-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);}举例（filter-opacity）透明度opacity()opacity()用于定义透明度，默认值为1。值为0%则图像完全透明，值为100%则图像不透明。该函数与已有的opacity属性相似。

.opacity{

opacity:0.5;

filter:alpha(opacity=50);

}所有浏览器都支持opacity属性，IE8及更早的版本支持替代的filter属性。filter:alpha(opacity=number)，number取值[0~100],0完全透明，100不透明。所以为兼容可写为：透明度opacity()举例（filter-opacity）#romance{-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);}举例（filter-saturate）定义图像饱和度。值为0%是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，表示具有更高的饱和度。默认值为1。饱和度saturate()#romance{-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);}举例（filter-sepia）将图像转换为深褐色。参数值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。默认值为0.褐色sepia()filter可以整合多个滤镜，滤镜之间可使用空格分隔开。#romance{-webkit-filter:grayscale(50%)sepia(50%);/*Chrome,Safari,Opera*/filter:grayscale(50%)sepia(50%);}举例（filter）符合函数filter()顺序是非常重要的(例如使用grayscale()后再使用sepia()将产生一个完整的灰度图片)。Tip过渡5.2transition简写属性，用于在一个属性中设置四个过渡属性。transition-property规定应用过渡的CSS属性的名称。transition-duration定义过渡效果花费的时间。transition-timing-function规定过渡效果的时间曲线。transition-delay规定过渡效果何时开始。CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1、指定要添加效果的CSS属性。2、指定效果的持续时间。Transition过渡把鼠标指针放到div元素上，其高度会从100px逐渐变为300px。举例（transition）div{width:100px;background:blue;

height:100px; transition:height2sease-in-out1s; -moz-transition:height2sease-in-out1s; -webkit-transition:height2sease-in-out1s; -o-transition:height2sease-in-out1s;}div:hover{height:300px;}Transition过渡div{width:100px;}div:hover{width:300px;transition:width2s;-moz-transition:width2s;-webkit-transition:width2s;-o-transition:width2s;}把鼠标指针放到div元素上，其宽度会从100px逐渐变为300px。Transition过渡举例（transition）transition-property

属性用于指定应用过渡效果的CSS属性的名称。基本语法格式transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。transition-property举例(transition-property)transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-duration:time;transition-duration举例(transition-duration)transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。基本语法格式transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);举例(transition-timing-function)transition-timing-functiontransition-timing-function属性的取值属性值描述linear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。ease指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。transition-timing-functiontransition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。基本语法格式transition-delay:time;正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。transition-delaytransition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。基本语法格式transition：propertydurationtiming-functiondelay;使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

例如：transition:border-radius5sease-in-out2s;transition无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。transition随堂练习（2）过渡举例1举例21、实现从左侧图片到右侧图片的过渡变化，过渡效果延时1s发生。2、上面例子只有一个过渡效果，如何同时有多个过渡效果应该怎么处理呢？下面例子同时采用过渡效果改变width、height、opacity的样式。动画5.3Animation动画@keyframes规定动画。animation所有动画属性的简写属性，除了animation-play-state属性。animation-name规定@keyframes动画的名称。animation-duration规定动画完成一个周期所花费的秒或毫秒。animation相关的属性CSS3的属性中有若干能够实现动画效果，通过设置其子属性，可以创造如移动、淡入淡出、改变颜色的效果。其子属性及功能描述如表所示：举例Animation动画animation-timing-function规定动画的速度曲线。animation-delay规定动画何时开始。animation-iteration-count规定动画被播放的次数。animation-direction规定动画是否在下一周期逆向地播放。animation-play-state规定动画是否正在运行或暂停。animation-fill-mode规定对象动画时间之外的状态。animation相关的属性举例属性值描述animationname必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。合法的值：0-100%from（与0%相同）to（与100%相同）css-styles必需。一个或多个合法的CSS样式属性。@keyframes规则基本语法格式@keyframes

animationname{keyframes-selector{css-styles;}}举例使div元素匀速向下移动：举例（

animation-@keyframes-fromto，animation-@keyframes-%）div{animation:mymove5sinfinite;}@keyframesmymove{from{top:0px;}to{top:200px;}}@-moz-keyframesmymove/*Firefox*/{from{top:0px;}to{top:200px;}}@-webkit-keyframesmymove/*Safari和Chrome*/{from{top:0px;}to{top:200px;}}@-o-keyframesmymove/*Opera*/{from{top:0px;}to{top:200px;}}"from"和"to"等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。@keyframes规则案例演示为@keyframes动画规定名称值描述keyframename规定需要绑定到选择器的keyframe的名称。none规定无动画效果（可用于覆盖来自级联的动画）。animation-name基本语法格式animation-name:keyframename|none;定义动画完成一个周期所需要的时间，以秒或毫秒计。说明：必须明确规定animation-duration属性，否则时长为0，就不会播放动画。举例（animation-duration）值描述time规定完成动画所花费的时间。默认值是0，意味着没有动画效果。animation-duration基本语法格式animation-duration:time;animation-timing-function规定动画的速度曲线。速度曲线定义动画在每一动画周期中执行的节奏。速度曲线用于使变化更为平滑。举例（

animation-timing-function）值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier（贝塞尔曲线）函数中自己的值。可能的值是从0到1的数值。animation-timing-function基本语法格式animation-timing-function:value;随堂练习（3）动画对比一下不同速度曲线的效果。演示示例：速度曲线animation-delay属性定义动画何时开始。举例（

animation-delay）animation-delay:-2s;/*W3C和Opera*/-moz-animation-delay:-2s;/*Firefox*/-webkit-animation-delay:-2s;/*Safari和Chrome*/animation-delay允许负值，-2s使动画马上开始，但跳过前2秒进入动画。基本语法格式animation-delay:time;animation-iteration-count属性定义动画的播放次数值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。animation-iteration-count基本语法格式animation-iteration-count:n|infinite;animation-direction属性定义是否应该轮流反向播放动画。如果animation-direction值是"alternate"，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。注释：如果把动画设置为只播放一次，则该属性没有效果。举例（

animation-direction）animation-direction基本语法格式animation-direction:normal|alternate;animation-play-state属性定义动画的状态。举例（

animation-play-state）Running表示运动Paused表示暂停animation-play-state基本语法格式animation-play-state:running|paused;举例（animation-fill-mode）animation-fill-mode属性定义动画结束后的状态，none无forwards动画结束（to里面的所有样式）时的状态backwards动画开始（from里面的所有样式）时的状态both动画开始或者结束时的状态。animation-fill-mode基本语法格式animation-fill-mode:none|forwards|backwards|both;animation属性是一个简写属性，用于在一个属性中设置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。注意：使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。完成animation练习animation基本语法格式animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction;随堂练习（4）动画实现动画，方块从左上角开始左→右→下→左，顺时针方向移动。同时背景色不断变化，red→yellow→blue→green→red。方向示意：→↑

↓←演示示例：动画转换5.4转换（transform）属性用于元素的2D或3D转换，这个属性允许用户对元素进行旋转、缩放、平移、倾斜等。这些效果在CSS3之前都需要依赖Flash或JavaScript才能完成。现在，使用纯CSS3就可以实现这些变形效果，而无须加载额外的文件，这样极大地提高了网页开发者的工作效率，提高了页面的执行速度。转换transform属性允许对元素应用2D转换，常见2D转换：2D转换平移倾斜缩放旋转transform属性的默认值为none，适用于内联元素和块元素r，表示不进行变形。transform：none|transform-functionstansform-functions用于设置变形函数，可以是一个或多个变形函数列表。基本语法格式2D转换2D转换函数名描述参数说明rotate(angel)旋转元素angel是度数值，代表旋转角度skew(x-angel,y-angel)倾斜元素angel是度数值，代表倾斜角度skewX(angel)沿着x轴倾斜元素skewY(angel)沿着y轴倾斜元素2D转换的常用函数2D转换函数名描述参数说明scale(x,y)缩放元素，改变元素的高度和宽度代表缩放比例，取值包括正数、负数和小数scaleX(x)改变元素的宽度scaleY(y)改变元素的高度2D转换的常用函数2D转换2D转换的常用函数函数名描述参数说明translate(x,y)移动元素对象，基于x和y坐标重新定位元素元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数translateX(x)沿着x轴移动元素translateY(y)沿着y轴移动元素matrix(n,n,n,n,n,n)2D转换矩阵使用六个值的表示变形，所有变形的本质都是由矩阵完成的举例使用translate()函数能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数，分别用于定义X轴和Y轴的坐标。x-value是元素在水平方向上向右移动的距离；y-value是元素在垂直方向上向下移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。