HTML5网页前端设计（第3版）- 微课视频版 课件 CH11 CSS3技术；CH12 前端综合应用·基于HTML5+CSS3的高校网站的设计与实现；CH13 前端框架实战·基于Vue3.x的秒表程序的设计与实现

第11章CSS3技术主讲人：XX老师本章学习目标掌握CSS3边框和背景效果的应用；掌握CSS3文本和字体效果的应用；掌握CSS3变形与动画效果的应用；掌握CSS3多列效果的应用。目录11.1CSS3边框和背景效果11.2CSS3文本和字体效果11.3CSS3变形与动画效果11.4CSS3多列11.1.1CSS3边框11.1.2CSS3背景效果11.1CSS3边框和背景效果11.1.1CSS3边框CSS3新增了三种边框效果，分别是：圆角边框：自定义圆角数量和弧度的边框矩形阴影：带阴影效果的边框图片边框：用自定义图片素材做边框11.1.1CSS3边框表11-1CSS3新增边框效果属性一览属性名称解释border-radius为元素设置圆角边框。box-shadow为元素设置带阴影效果的边框。border-image为元素设置带有背景图片的边框。11.1.1CSS3边框1CSS3圆角边框在CSS3中，border-radius属性可用于直接创建带有圆角的边框样式，该属性值表示圆角边框的圆角半径长度，数值越大则圆的弧度越明显。其语法格式如下：border-radius属性的取值有以下两种形式：<length>：使用长度值规定圆角半径的长度，该值不可为负数。<percentage>：使用百分比规定圆角半径的长度，该值不可为负数。border-radius:<length>|<percentage>;11.1.1CSS3边框1CSS3圆角边框例如，为段落元素p设置圆角边框，其中圆角半径为20像素：p{border-radius:20px}11.1.1CSS3边框1CSS3圆角边框主流浏览器对CSS3中的border-radius属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本5.0及以上版本5.0及以上版本10.5及以上版本11.1.1CSS3边框1CSS3圆角边框注：部分主流浏览器在支持CSS3标准的border-radius属性写法之前使用特定的前缀实现此功能，具体情况如下：Firefox：2.0-12.0版本支持使用-moz-前缀，写成-moz-border-radius。Chrome：4.0-43.0版本支持使用-webkit-前缀，写成-webkit-border-radius。Safari：3.1-8.1版本支持使用-webkit-前缀，写成-webkit-border-radius。Opera：10.5-28.0版本支持使用-webkit-前缀，写成-webkit-border-radius。11.1.1CSS3边框1CSS3圆角边框CSS3圆角边框属性值一览表属性值解释border-radius用于定义边框四个角的弧度border-top-left-radius用于定义边框左上角的弧度border-top-right-radius用于定义边框右上角的弧度border-bottom-left-radius用于定义边框左下角的弧度border-bottom-right-radius用于定义边框右下角的弧度以上4种border-*-radius属性均与border-radius属性取值方式相同，可以使用长度值或百分比的形式表示。11.1.1CSS3边框1CSS3圆角边框【例11-1】CSS3圆角边框效果11.1.1CSS3边框2CSS3矩形阴影在CSS3中，box-shadow属性可以为边框添加阴影，该属性适用于所有元素。box-shadow的默认属性值为none，表示无阴影效果。其语法格式如下：

参数解释如下：xoffset：表示阴影在水平方向（x轴）上的偏移距离，取值为CSS长度值<length>。yoffset：表示阴影在垂直方向（y轴）上的偏移距离，取值为CSS长度值<length>。width：表示阴影的宽度，取值为CSS长度值<length>。color：表示阴影的颜色效果，取值为CSS颜色值<color>。box-shadow:xoffsetyoffsetwidthcolor11.1.1CSS3边框2CSS3矩形阴影例如，为矩形添加一个15px宽的灰色阴影，映射在右下角。div{

box-shadow:10px10px15pxgray}11.1.1CSS3边框2CSS3矩形阴影主流浏览器对CSS3中的box-shadow属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本10.0及以上版本5.1及以上版本10.5及以上版本11.1.1CSS3边框2CSS3矩形阴影注：部分主流浏览器在统一支持CSS3的box-shadow属性之前使用特定的前缀实现此功能，具体情况如下：Firefox：4.0-12.0版本支持使用-moz-前缀，写成-moz-box-shadow。Chrome：4.0-43.0版本支持使用-webkit-前缀，写成-webkit-box-shadow。Safari：3.1-8.1版本支持使用-webkit-前缀，写成-webkit-box-shadow。Opera：10.5-28.0版本支持使用-webkit-前缀，写成-webkit-box-shadow。11.1.1CSS3边框2CSS3矩形阴影【例11-2】CSS3矩形阴影效果

11.1.1CSS3边框3CSS3图像边框在CSS3中，border-image属性可以元素添加自定义图像效果的边框，该属性适用于所有元素。主流浏览器对CSS3中的border-image属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况11.0及以上版本15.0及以上版本16.0及以上版本6.0及以上版本15.0及以上版本11.1.1CSS3边框3CSS3图像边框

注：部分主流浏览器在支持CSS3标准的border-image属性写法之前使用特定的前缀实现此功能，具体情况如下：Firefox：3.5-14.0版本支持使用-moz-前缀，写成-moz-border-image。Chrome：4.0-15.0版本支持使用-webkit-前缀，写成-webkit-border-image。Safari：3.1-5.1版本支持使用-webkit-前缀，写成-webkit-border-image。11.1.1CSS3边框3CSS3图像边框CSS3图片边框属性一览表属性名称解释border-image-source用于设置或获取元素边框的图像来源路径。其默认值为none，表示无背景图片。border-image-slice用于设置或获取边框图片的分割方式。border-image-width用于设置或获取边框厚度。border-image-outset用于设置或获取边框背景图超出边框的量。border-image-repeat用于设置或获取边框图片的平铺状态。其默认值为stretch。border-image复合属性，用于定义边框图片的全部设置。11.1.1CSS3边框3CSS3图像边框border-image-slice属性有三种取值，解释如下：<number>：使用数值规定宽度，允许是整数或浮点数，不可以是负数。<percentage>：使用百分比规定宽度，不可以是负值。fill：保留剪裁后的区域，这块区域的平铺方式依据border-image-repeat的规定。注：border-image-slice属性的默认值为100%。11.1.1CSS3边框3CSS3图像边框border-image-repeat属性有三种取值，解释如下：repeat：定义用重复平铺的方式填充边框背景图。如果图片碰到边框的边界超过部分将被截断。round：定义用重复平铺的方式填充边框背景图。图片会根据边框尺寸动态调整图片大小，直至正好可以铺满整个边框。stretch：定义用拉伸图片的方式填充边框背景图。该属性值为默认值。注：事实上border-image-repeat属性在标准中还有一个取值为space，由于目前所有的主流浏览器均不支持该属性，因此没有列入表中。11.1.1CSS3边框3CSS3图像边框border-image是一种简写形式，用于一次性定义若干种border-image-*属性。其声明常用顺序如下（省略border-image-前缀）：[source][slice][width][outset][repeat]border-image属性的默认值为none100%10stretch，如果其中部分属性省略不写，则取其对应的默认值。11.1.1CSS3边框3CSS3图像边框如果同时设置了border-style与border-image属性，浏览器会优先显示border-image规定的样式效果。当border-image属性值为none或者指定的图像不可见时将会显示border-style所定义的边框样式。11.1.1CSS3边框3CSS3图像边框例如，为段落元素p同时设置普通边框样式与图片边框样式：p{border:2pxsolidred;border-image:url(image/test.jpg)10;}上述代码同时定义了border属性与border-image属性，如果border-image中指定的图片不可见或尚未被加载，则以border属性规定的样式显示；如果图片加载成功，则只显示border-image规定的边框样式。11.1.1CSS3边框3CSS3图像边框【例11-3】CSS3图像边框效果

11.1.2CSS3背景效果CSS3新增了三种背景效果，可用于自定义背景图片或颜色的绘制区域、位置和尺寸。属性名称解释background-clip自定义背景图片的绘制区域。background-origin自定义背景图片的位置。background-size自定义背景图片的尺寸。CSS3新增背景效果属性一览11.1.2CSS3背景效果1自定义背景图片绘制区域在CSS3中，background-clip属性可用于剪裁元素的背景图片或颜色区域，使其只显示指定的区域内容。其语法格式如下：background-clip:border-box|padding-box|content-box|text;11.1.2CSS3背景效果background-clip:border-box|padding-box|content-box|text;background-clip属性的取值有以下4种形式：padding-box：只保留元素内边距之内的背景区域，包括内边距本身。border-box：只保留元素边框之内的背景区域，包括边框本身。content-box：只保留元素内容区域的背景。该属性值是默认值。text：只保留前景内容（例如文字）的形状，其他区域的背景图像均去掉。该取值必须将属性名称写成-webkit-background-clip方可使用。1自定义背景图片绘制区域11.1.2CSS3背景效果1自定义背景图片绘制区域

注：部分主流浏览器在完全支持background-clip属性之前的情况如下：Firefox：3.6版本支持使用-moz-前缀，写成-moz-background-clip。其中2.0-38.0版本不支持text属性值。主流浏览器对CSS3中的background-clip属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本11.1.2CSS3背景效果1自定义背景图片绘制区域【例11-4】CSS3background-clip属性的应用11.1.2CSS3背景效果2自定义背景图片位置在CSS3中，background-origin属性可用于剪裁元素的背景图片，使其只显示指定的区域内容。该属性必须与background-image属性配合使用，否则没有图片来源则无法对背景图片进行定位。11.1.2CSS3背景效果2自定义背景图片位置background-origin属性的语法格式如下：background-origin:border-box|padding-box|content-box;background-origin属性的参数表示背景图片的位置，有以下3种取值：padding-box：从元素内边距开始显示背景图像，该属性值是默认值。border-box：从元素边框开始显示背景图像。content-box：从元素内容区域开始显示背景图像。11.1.2CSS3背景效果2自定义背景图片位置浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本主流浏览器对CSS3中的background-origin属性支持情况一览11.1.2CSS3背景效果2自定义背景图片位置【例11-5】CSS3background-origin属性的应用

11.1.2CSS3背景效果3自定义背景图片尺寸在CSS3中，background-size属性可用于定义元素背景图片的尺寸大小。其语法格式如下：background-size:<bg-size>[,<bg-size>];11.1.2CSS3背景效果3自定义背景图片尺寸background-size属性的格式解释如下：background-size的<bg-size>参数表示背景图片的位置，有以下5种取值：<length>：使用长度值规定背景图像的大小，该值不可为负数。<percentage>：使用百分比规定背景图像的大小，该值不可为负数。auto：背景图像的真实大小。cover：将背景图像等比例缩放到完全覆盖容器。由于图像有可能与容器比例不一致导致部分背景图像超出容器范围。contain：将背景图像等比例缩放到宽度或高度与容器保持一致。背景图像始终在容器中，不会超出容器的范围。11.1.1CSS3边框3自定义背景图片尺寸如果只有单个参数则用于表示宽度的样式，高度默认为跟随宽度等比例缩放。例如：p{background-size:200px;}上述代码表示将段落元素<p>的背景图片宽度缩放为200像素，高度会随着宽度等比例缩放。11.1.1CSS3边框3自定义背景图片尺寸如果有2个参数则第一个参数表示宽度，第二个参数表示高度。例如：p{background-size:200px300px;}上述代码表示将段落元素<p>的背景图片宽度缩放为200像素、高度缩放为300像素。11.1.2CSS3背景效果3自定义背景图片尺寸主流浏览器对CSS3中的background-size属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本15.0及以上版本7.0及以上版本15.0及以上版本注：部分主流浏览器在完全支持background-size属性之前的情况如下：Firefox：3.6版本支持使用-moz-前缀，写成-moz-background-size。Chrome：4.0-14.0版本支持使用background-size，但不可缩写到background属性中。Safari：6.0-6.1版本支持使用background-size，但不可缩写到background属性中。11.1.2CSS3背景效果3自定义背景图片尺寸【例11-6】CSS3自定义背景图像尺寸效果

11.2.1CSS3文本11.2.2CSS3字体11.2CSS3文本和字体效果11.2.1CSS3文本CSS3新增了两种文本效果，分别是为文本添加阴影效果和长单词强制换行效果。具体属性名称如表所示。CSS3新增文本效果属性一览属性名称解释text-shadow用于为指定的文本添加阴影效果。word-wrap用于实现长单词强制换行效果。11.2.1CSS3文本1CSS3文本阴影CSS3使用text-shadow属性为指定文本添加阴影效果。其基本格式如下：text-shadow:xoffsetyoffsetwidthcolor11.2.1CSS3文本1CSS3文本阴影参数解释如下：xoffset：指的是阴影距离原文字内容在横向上的偏移距离。取值为CSS长度值<length>，可以为负值。yoffset：指的是阴影距离原文字内容在纵向上的偏移距离。取值为CSS长度值<length>，可以为负值。width：表示阴影的模糊半径，半径越大阴影面积越大，显示效果越模糊，该值如果缺省则阴影和正文的面积大小完全一样。取值为CSS长度值<length>，不能为负值。color：表示阴影的颜色效果，取值为CSS颜色值<color>。该值如果缺省在Chrome浏览器中不会显示阴影，而在Firefox和Opera浏览器中将直接使用字体颜色作为阴影颜色。注：text-shadow的默认属性值为none，表示无阴影效果。11.2.1CSS3文本1CSS3文本阴影例如：h3{text-shadow:5px5pxred}指的是在目标文本内容右边5px和下面5px的地方渲染红色阴影。11.2.1CSS3文本1CSS3文本阴影主流浏览器对CSS3中的text-shadow属性支持情况如表所示。主流浏览器对CSS3中的text-shadow属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流浏览器在完全支持text-shadow属性之前的情况如下：Firefox：3.6版本支持使用-moz-前缀，写成-moz-text-shadow。其中2.0-38.0版本不支持text属性值。11.2.1CSS3文本1CSS3文本阴影【例11-7】CSS3文本阴影简单效果

11.2.1CSS3文本1CSS3文本阴影【例11-8】CSS3文本阴影特殊效果

（文字发光、凹凸纹理、文字描边等效果）

11.2.1CSS3文本2CSS3文字换行CSS3使用word-wrap属性规定文本的换行规则，可以将长单词断开换到下一行继续显示。其语法格式如下：word-wrap:normal|break-word;word-wrap属性的取值有以下两种形式：normal：指的是只允许在断字点换行，如果单词较长则直接溢出边界不会自动换行。该属性值为默认值。break-word：指的是文本内容允许在边界内换行，如果单词较长将在内部断开换行。注：word-wrap的默认属性值为none，表示无阴影效果。11.2.1CSS3文本2CSS3文字换行例如：p{word-wrap:break-word;}上述代码表示段落元素<p>中的文字内容强制在元素边界处换行。11.2.1CSS3文本2CSS3文字换行主流浏览器对CSS3中的text-shadow属性支持情况如表所示。主流浏览器对CSS3中的text-shadow属性支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流浏览器在完全支持text-shadow属性之前的情况如下：Firefox：3.6版本支持使用-moz-前缀，写成-moz-text-shadow。其中2.0-38.0版本不支持text属性值。11.2.1CSS3文本2CSS3文字换行【例11-9】CSS3文本强制换行效果11.2.2CSS3字体在CSS3之前，浏览器只能显示设备上已安装的字体。目前在CSS3中，通过@font-face的规则，网页可以显示任何字体。当有特殊字体时，可以将其放在服务器端，在浏览页面时会被自动下载到用户的设备终端。11.2.2CSS3字体其语法规则如下：@font-face{font-family:<identifier>;src:<url>[format(<string>)]}11.2.2CSS3字体例如：@font-face{font-family:'diyfont';src:url('diyfont.ttf')format('truetype')}其中font-family的名称可以自定义，然后在CSS样式声明font属性时使用该名称即可。p{font-family:'diyfont';}11.2.2CSS3字体浏览器对@font-face的支持情况浏览器EdgeFirefoxChromeSafariOpera支持情况9.0及以上版本4.0及以上版本4.0及以上版本6.0及以上版本15.0及以上版本

注：部分主流浏览器在完全支持text-shadow属性之前的情况如下：Firefox：3.6版本支持使用-moz-前缀，写成-moz-text-shadow。其中2.0-38.0版本不支持text属性值。11.2.2CSS3字体目前各类浏览器中的常用字体格式有如下四种：TrueType(.ttf)：中文称为“全真”字体，该字体由微软与苹果公司联合提出，使用数学函数定义字体轮廓，因此也被称为轮廓字体。；WebOpenFontFormat(.woff)：中文称为“开放字体格式”，该字体不包含加密内容，目前由W3C组织的Web字体工作组进行标准化；EmbeddedOpenType(.eot)：这是一种压缩字库，可以解决网页中加载特殊字体的问题。该字体目前只有IE浏览器（微软已于2023年2月14日正式禁用）可以支持；SVG(.svg)：SVG的全称是ScalableVectorGraphics（可缩放矢量图），它使用二维矢量图来显示字体，也是由W3C制定的一种开放标准。11.2.2CSS3字体【例11-10】CSS3自定义字体效果字体来源于本地font文件夹中的litte.ttf文件。11.3.1CSS32D变形11.3.2CSS3

Transition动画11.3.3CSS3Animation动画11.3CSS3变形与动画效果11.3.1CSS32D变形CSS3中的transform属性用于元素变形，它能够实现对元素进行移动、收缩、旋转等2D动画效果。11.3.1CSS32D变形主流浏览器对transform属性的2D效果支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况10.0及以上版本16.0及以上版本36.0及以上版本9.0及以上版本23.0及以上版本补充说明如下：Firefox：3.5-15.0版本支持使用前缀-moz-，写成-moz-transform的形式。Chrome：4.0-35.0版本支持使用前缀-webkit-，写成-webkit-transform的形式。Safari：6.0-8.0版本支持使用前缀-webkit-，写成-webkit-transform的形式。Opera：15.0-22.0版本支持使用前缀-webkit-，写成-webkit-transform的形式。11.3.1CSS32D变形transform属性有如下5种方法，具体可以查看表。方法名称解释translate(x,y)元素移动到指定位置。例如translate(10px,20px)表示元素从左侧往右移动10像素，从顶部往下移动20像素。rotate(degree)元素顺时针旋转指定的角度，填入负数则逆时针旋转。例如rotate(30deg)表示顺时针旋转30度。scale(x,y)元素尺寸缩放指定的倍数。例如scale(2,3)表示宽度放大为原始尺寸的2倍，高度放大为原先的3倍。skew(xdeg,ydeg)围绕x轴和y轴将元素翻转指定的角度。例如skew(20deg,10deg)指的是将元素横向倾斜20度，纵向倾斜10度。matrix(m11,m12,m21,m22,dx,dy)该方法包含了矩阵变换数学函数，根据填入的数据不同可以做到元素的移动、旋转、缩放和倾斜。可以用该方法完成更为复杂的变形。transform属性方法一览表11.3.1CSS32D变形1移动translate()CSS3transform属性的translate()方法可用于在页面上平移元素，包括水平方向与垂直方向均可指定偏移量。其语法格式如下：transform:translate(x[,y]);其中参数x表示水平方向x轴上的移动距离，参数y表示垂直方向y轴上的移动距离。如果省略参数y，则默认y轴上的移动距离为0。11.3.1CSS32D变形1移动translate()例如：p{transform:translate(10px,20px);}上述代码表示段落元素<p>从初始位置往右移动10像素、往下移动20像素。11.3.1CSS32D变形1移动translate()也可以单独使用translateX()或translateY()方法指定水平或垂直其中一个方向上的移动距离。语法格式如下：例如：transform:translateX(x);p{transform:translateX(10px);}上述代码表示元素从左侧往右移动10像素。11.3.1CSS32D变形1移动translate()【例11-11】CSS32D移动效果11.3.1CSS32D变形2旋转rotate()CSS3transform属性的rotate()方法可用于在页面上旋转元素。其语法格式如下：transform:rotate(<angle>);参数<angle>表示元素顺时针旋转指定的角度，属性值为CSS角度值。11.3.1CSS32D变形2旋转rotate()例如：p{transform:rotate(30deg);}上述代码表示段落元素<p>从初始位置顺时针旋转30度。11.3.1CSS32D变形2旋转rotate()【例11-12】CSS32D旋转效果11.3.1CSS32D变形3缩放scale()CSS3transform属性的scale()方法可用于在页面上放大或缩小元素。其语法格式如下：transform:scale(x[,y]);其中参数x表示水平方向x轴上的缩放倍数，参数y表示垂直方向y轴上的缩放倍数。如果省略参数y，则默认y轴上的缩放倍数与x轴相同。属性取值为CSSS数值<number>，允许是整数或者浮点数，其中取值为1表示原始尺寸没有进行缩放。11.3.1CSS32D变形3缩放scale()例如：p{transform:scale(2,3);}上述代码表示段落元素<p>宽度放大为原始尺寸的2倍，高度放大为原先的3倍。11.3.1CSS32D变形3缩放scale()也可以单独使用scaleX()或scaleY()方法指定水平或垂直其中一个方向上的缩放倍数。指定元素水平方向缩放的语法格式如下：指定元素垂直方向缩放的语法格式如下：transform:scaleX(x);transform:scaleY(y);11.3.1CSS32D变形3缩放scale()【例11-13】CSS32D缩放效果11.3.1CSS32D变形4翻转skew()CSS3transform属性的skew()方法可用于在页面上翻转元素。其语法格式如下：transform:skew(<angleX>[,<angleY>]);其中第一个参数<angleX>表示水平方向x轴上的倾斜扭曲角度，第二个参数<angleY>表示水平方向y轴上的倾斜扭曲角度。如果省略参数y，则默认值为0。属性取值为CSSS角度值<angle>。11.3.1CSS32D变形4翻转skew()例如：p{transform:skew(20deg,10deg);}上述代码表示将段落元素<p>横向倾斜20度，纵向倾斜10度。11.3.1CSS32D变形4翻转skew()也可以单独使用skewX()或skewY()方法指定水平或垂直其中一个方向上的翻转情况。指定元素水平方向x轴翻转的语法格式如下：指定元素垂直方向y轴翻转的语法格式如下：transform:skewX(<angle>);transform:skewY(<angle>);11.3.1CSS32D变形4翻转skew()【例11-14】CSS32D翻转效果11.3.1CSS32D变形5矩阵变换matrix()CSS3transform属性的matrix()方法是以矩阵变换的数学函数实现元素的变形效果。其语法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩阵，元素变换前的坐标点(x,y)与矩阵相乘换算后得到新的坐标点，最后分别加上参数dx和dy的偏移量得到最终坐标结果。11.3.1CSS32D变形5矩阵变换matrix()CSS3transform属性的matrix()方法是以矩阵变换的数学函数实现元素的变形效果。其语法格式如下：transform:matrix(m11,m12,m21,m22,dx,dy);其中(m11,m12,m21,m22)表示矩阵，元素变换前的坐标点(x,y)与矩阵相乘换算后得到新的坐标点，最后分别加上参数dx和dy的偏移量得到最终坐标结果。11.3.1CSS32D变形5矩阵变换matrix()【例11-15】CSS32D矩阵变形效果

由于matrix()变形的函数转换比较复杂，假如只需进行基本变形，可以直接使用translate()、rotate()、scale()或skew()方法实现。11.3.2CSS3

Transition动画CSS3中的Transition动画又称为过渡动画，在指定时间内可以将元素从原始样式逐渐变化为新的样式。通常可用于鼠标悬停在元素上发生动画事件。11.3.2CSS3

Transition动画transition动画包含5种属性，具体可以查看下表。属性名称解释transition-property用于指定对何种CSS属性进行渐变处理。例如可以指定元素的背景颜色background-color、宽度width、高度height等。transition-duration用于指定transition动画的持续时间，例如5秒写为5s。transition-timing-function用于指定transition动画的渐变速度。缺省值为ease。transition-delay用于指定transition动画的延迟时间，缺省值为0s。transition复合属性，用于一次性设置4种属性效果。11.3.2CSS3

Transition动画1.渐变属性transition-property在CSS3中transition-property属性用于指定需要发生渐变的CSS属性名称，其语法格式如下：transition-property:none|all|property;transition-property属性的取值有以下3种形式：none：没有任何属性获得渐变效果。all：所有属性都获得渐变效果。property：设置渐变效果的CSS属性名称。如果是多个属性则以列表的形式出现，中间用逗号隔开。11.3.2CSS3

Transition动画1.渐变属性transition-property例如，为段落元素p指定需要产生渐变效果的CSS属性名称：p{transition-property:width,height;}上述代码表示同时设置元素的宽度和高度发生渐变效果。11.3.2CSS3

Transition动画1.渐变属性transition-property如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：：p{transition-property:width,height;/*兼容旧版Firefox*/-moz-transition-property:width,height;/*兼容旧版SafariandChrome*/-webkit-transition-property:width,height;}该属性通常需要与tranisition-duration属性配合使用，否则时长为0看不出渐变效果。11.3.2CSS3

Transition动画1.渐变属性transition-property渐变属性transition-property支持的常见CSS属性参考如下：颜色值：背景颜色background-color、字体颜色color、边框颜色border-color等。长度或百分比：宽度width、高度height、外边距margin、内边距padding等。数值：透明度opacity、字号font-size、字体粗细font-weight等。11.3.2CSS3

Transition动画2.渐变持续时间transition-duration在CSS3中transition-duration属性用于指定渐变动画效果的持续时长，持续时间越长渐变效果越慢。其语法格式如下：transition-duration:<time>;该属性值单位为秒或者毫秒。其缺省状态为0s，元素会瞬间从原始状态变成最终状态，无法显示动画渐变过程，因此不建议省略transition-duration属性的设置。11.3.2CSS3

Transition动画2.渐变持续时间transition-duration例如，为段落元素p指定渐变持续时间为10秒：p{transition-duration:10s;}11.3.2CSS3

Transition动画2.渐变持续时间transition-duration如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{transition-duration:10s;/*兼容旧版Firefox*/-moz-transition-duration:10s;/*兼容旧版SafariandChrome*/-webkit-transition-duration:10s;}11.3.2CSS3

Transition动画2.渐变持续时间transition-duration【例11-16】CSS3设置渐变动画持续时间

11.3.2CSS3

Transition动画3.渐变速率函数transition-timing-function在CSS3中transition-timing-function用于设置渐变速率函数。其语法格式如下：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier;transition-timing-function属性的取值常见以下6种形式：linear：匀速。该值等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。ease：逐渐变慢。该值为默认值，等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。ease-in：加速。该值等同于贝塞尔曲线(0.42,0,1.0,1.0)。ease-out：减速。该值等同于贝塞尔曲线(0,0,0.58,1.0)。ease-in-out：先加速再减速。该值为默认值，等同于贝塞尔曲线(0.42,0,0.58,1.0)。cubic-bezier：使用贝赛尔曲线函数自定义速度变化。11.3.2CSS3

Transition动画4.渐变延迟时间transition-delay在CSS3中transition-delay属性用于指定渐变动画延迟播放的时间，延迟时间越长则动画越晚播放。其语法格式如下：例如，为段落元素p指定渐变延迟时间为10秒：transition-delay:<time>;该属性值单位为秒或者毫秒。其缺省状态为0s，表示不延迟立刻播放动画效果。p{transition-delay:10s;}11.3.2CSS3

Transition动画4.渐变延迟时间transition-delay如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{transition-delay:10s;/*兼容旧版Firefox*/-moz-transition-delay:10s;/*兼容旧版SafariandChrome*/-webkit-transition-delay:10s;}11.3.2CSS3

Transition动画5.渐变复合属性transition在CSS3中transition属性用于一次性指定所有的动画设置要求，是一个复合属性。其声明常用顺序如下:[transition-property][transition-duration][transition-timing-function][transition-delay]参数之间使用空格隔开即可，如有未声明的参数取其默认值。需要注意的是，如果只提供了一个时间参数，无论其位置在何处均默认为是transition-duration属性值。11.3.2CSS3

Transition动画5.渐变复合属性transition例如，为段落元素p指定一系列渐变效果:使用复合属性transition可简写为：p{transition-property:background-color;transition-duration:10s;transition-timing-function:ease-in;transition-delay:10s;}p{transition:background-color10sease-in10s;}11.3.2CSS3

Transition动画5.渐变复合属性transition还可以使用复合属性transition同时指定多种渐变，之间用逗号隔开即可。例如:p{transition:background-color10sease-in10s,color10sease-in10s,width10sease-in10s;}11.3.2CSS3

Transition动画【例11-17】CSS3Transition动画效果

11.3.3CSS3Animation动画CSS3可以创建Animation动画效果。该动画可以自定义任意多个关键时间点的样式效果，浏览器将自动处理两个关键时间节点之间的渐变效果，所有的关键帧组合在一起形成更复杂的动画效果。在网页文档中使用可取代Flash动画、动态图片和JavaScript。11.3.3CSS3Animation动画animation动画相关属性一览表属性名称解释@keyframes用于设置自定义动画内容。animation-name用于检查或设置需要执行的@keyframes动画的名称。animation-duration用于检查或设置动画完成的时间。默认值为0。animation-timing-function用于检查或设置动画的速度曲线，默认值是ease。animation-delay用于检查或设置动画延迟开始的时间。默认值是0。animation-iteration-count用于检查或设置动画的播放次数。默认值为1。animation-direction用于检查或设置动画在循环播放时的运动方向。animation-play-state用于检查或设置动画是否在运行或暂停状态。默认值为running。animation-fill-mode用于检查或设置动画时间以外的状态。animation复合属性，用于一次性设置所有动画效果。11.3.3CSS3Animation动画1.@keyframes规则帧（frame）是影像动画中最小单位的单幅影像画面，一帧就相当于一副静止的画面，连续的帧可以形成动画效果。在CSS3中使用@keyframes规则定义一套动画效果中若干个关键帧的样式效果，其格式如下：@keyframes动画名称{from{样式要求}to{样式要求}}11.3.3CSS3Animation动画1.@keyframes规则其中动画名称可以自定义，from表示起始帧的样式，to表示最终帧的样式。例如，定义一个名称为myframe的动画，要求背景颜色起始为红色，最终变为黄色，其写法如下：@keyframesmyframe{from{background-color:red}to{background-color:yellow}}11.3.3CSS3Animation动画1.@keyframes规则如果需要更丰富的动画效果，可以使用百分比来表示时间刻度。百分比的数值必须从0%开始到100%结束，中间的时间百分比数值和数量都可以自定义。这里的0%相当于关键词from的效果，100%相当于关键词to的效果。例如：@keyframes动画名称{0%{样式要求}25%{样式要求}50%{样式要求}75%{样式要求}100%{样式要求}}11.3.3CSS3Animation动画1.@keyframes规则创建完成的动画必须指定时长并绑定到目标元素中方可生效。例如将刚才使用@keyframes创建的myframe动画使用到段落标签<p>上的写法如下：p{animation:myframe8s;}上述代码表示在8秒的时间范围内让段落元素<p>进行名称为myframe的动画内容。这里使用了复合属性animation的简写形式，同时规定了动画名称与动画的持续时间。11.3.3CSS3Animation动画2.动画应用名称animation-name在CSS3中animation-name属性专门用于指定需要发生的动画名称。该属性值需要配合@keyframes规则使用，因为这里的动画名称不可以自定义，必须是在@keyframes规则中已声明的动画效果。其语法格式如下:animation-name:none|<identifier>;animation-name属性的取值有以下两种形式：none：不引用任何动画名称，该属性值为默认值。<identifier>：定义一个或多个动画名称，该名称必须来源于@keyframes规则。11.3.3CSS3Animation动画2.动画应用名称animation-name例如，为段落元素p指定上一节设置的名称为myframe的动画效果:p{animation-name:myframe;}11.3.3CSS3Animation动画2.动画应用名称animation-name如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{animation-name:myframe;/*兼容旧版Firefox*/-moz-animation-name:myframe;/*兼容旧版SafariandChrome*/-webkit-animation-name:myframe;}由于默认情况下动画的持续时间为0，此时看不到动画效果。必须配合CSS3Animation动画中的animation-duration属性重新规定动画时间方可看到完整动画效果。下一小节将介绍animation-duration属性的用法。11.3.3CSS3Animation动画3.动画持续时间animation-duration在CSS3中animation-duration属性用于指定动画效果的持续时长，持续时间越长动画效果越慢。其语法格式如下：animation-duration:<time>;该属性值单位为秒或者毫秒。其缺省状态为0s，元素会瞬间从原始状态变成最终状态，无法显示动画过程，因此不建议省略animation-duration属性的设置。11.3.3CSS3Animation动画3.动画持续时间animation-duration例如，为段落元素p指定刚才的myframe动画时间为10秒：p{animation-name:myframe;animation-duration:10s;}11.3.3CSS3Animation动画3.动画持续时间animation-duration如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{animation-name:myframe;animation-duration:10s;/*兼容旧版Firefox*/-moz-animation-name:myframe;-moz-animation-duration:10s;/*兼容旧版SafariandChrome*/-webkit-animation-name:myframe;-webkit-animation-duration:10s;}11.3.3CSS3Animation动画4.动画速率函数animation-timing-function在CSS3中animation-timing-function用于设置动画速率函数。与之前介绍的CSS3Transition动画中transition-timing-function属性值类似，animation-timing-function属性的取值有以下6种形式：linear：线性动画，表示匀速动画效果。该值等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。ease：逐渐变慢。该值为默认值，等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。ease-in：表示由慢到快的加速效果。该值等同于贝塞尔曲线(0.42,0,1.0,1.0)。ease-out：表示由快到慢的减速效果。该值等同于贝塞尔曲线(0,0,0.58,1.0)。ease-in-out：先加速再减速。该值为默认值，等同于贝塞尔曲线(0.42,0,0.58,1.0)。cubic-bezier：使用贝兹尔曲线函数自定义速度变化。11.3.3CSS3Animation动画5.动画延迟时间animation-delay在CSS3中animation-delay属性用于指定动画延迟播放的时间，延迟时间越长则动画越晚播放。其语法格式如下：例如，为段落元素p指定渐变延迟时间为10秒：animation-delay:<time>;该属性值单位为秒或者毫秒。其缺省状态为0s，表示不延迟立刻播放动画效果。p{animation-delay:10s;}11.3.3CSS3Animation动画5.动画延迟时间animation-delay如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{animation-delay:10s;/*兼容旧版Firefox*/-moz-animation-delay:10s;/*兼容旧版SafariandChrome*/-webkit-animation-delay:10s;}11.3.3CSS3Animation动画6.动画循环次数animation-iteration-count在CSS3中animation-iteration-count属性用于设置动画的循环播放次数。其语法格式如下：animation-iteration-count:infinite|<number>;animation-iteration-count属性的取值有以下两种形式：infinite：表示无限循环。<number>：用于规定动画循环播放的具体次数。该属性的默认值为1，表示只播放一次动画效果。11.3.3CSS3Animation动画6.动画循环次数animation-iteration-count例如，为段落元素p指定循环播放2次动画：p{animation-iteration-count:2;}11.3.3CSS3Animation动画6.动画循环次数animation-iteration-count如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式：p{animation-iteration-count:2;/*兼容旧版Firefox*/-moz-animation-iteration-count:2;/*兼容旧版SafariandChrome*/-webkit-animation-iteration-count:2;}11.3.3CSS3Animation动画7.动画运动方向animation-direction在CSS3中animation-direction属性用于指定循环播放动画的运动方向。其语法格式如下:animation-direction:normal|reverse|alternate|alternate-reverse;

animation-direction属性的取值有以下4种形式：normal：正常方向运行动画，该属性值也是默认值。reverse：反方向运行动画。alternate：动画先正常运行再反向运行，并持续交替。alternate-reverse：动画先反向运行再正常运行，并持续交替。11.3.3CSS3Animation动画7.动画运动方向animation-direction例如，为段落元素p设置反向运动的动画效果:p{animation-direction:reverse;}11.3.3CSS3Animation动画7.动画运动方向animation-direction如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式:p{animation-direction:reverse;/*兼容旧版Firefox*/-moz-animation-direction:reverse;/*兼容旧版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation动画7.动画运动方向animation-direction如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式:p{animation-direction:reverse;/*兼容旧版Firefox*/-moz-animation-direction:reverse;/*兼容旧版SafariandChrome*/-webkit-animation-direction:reverse;}11.3.3CSS3Animation动画8.动画之外状态animation-fill-mode在CSS3中animation-fill-mode属性用于指定动画效果之外的元素状态。其语法格式如下:animation-fill-mode:none|forwards|backwards|both;animation-fill-mode属性的取值有以下4种形式：none：不设置动画之外的元素状态，该属性值为默认值。forwards：设置动画之外的元素状态为动画结束时的样式。backwards：设置动画之外的元素状态为动画刚开始时的样式。both：设置动画之外的元素状态为动画刚开始或结束时的样式。11.3.3CSS3Animation动画8.动画之外状态animation-fill-mode例如，为段落元素p指定动画之外的状态为动画结束时的样式:p{animation-fill-mode:backwards;}11.3.3CSS3Animation动画8.动画之外状态animation-fill-mode如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式:p{animation-fill-mode:backwards;/*兼容旧版Firefox*/-moz-animation-fill-mode:backwards;/*兼容旧版SafariandChrome*/-webkit-animation-fill-mode:backwards;}11.3.3CSS3Animation动画9.动画运行状态animation-play-state在CSS3中animation-play-state属性用于检索或设置动画运行状态。其语法格式如下:animation-play-state:running|paused;animation-play-state属性的取值有以下两种形式：running：动画为运行状态，该属性值为默认值。paused：动画为暂停状态。11.3.3CSS3Animation动画9.动画运行状态animation-play-state例如，当鼠标悬浮在段落元素<p>上时暂停动画效果:p:hover{animation-play-state:paused;}11.3.3CSS3Animation动画9.动画运行状态animation-play-state如果需要兼容低版本的主流浏览器，可以把几种写法都加入CSS样式:p:hover{animation-play-state:paused;/*兼容旧版Firefox*/-moz-animation-play-state:paused;/*兼容旧版SafariandChrome*/-webkit-animation-play-state:paused;}11.3.3CSS3Animation动画10.动画复合属性animation在CSS3中animation属性用于一次性指定所有的动画设置要求，是一个复合属性。其声明常用顺序如下:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode][animation-play-state]参数之间使用空格隔开即可，如有未声明的参数取其默认值。需要注意的是，如果只提供了一个时间参数，无论其位置在何处均默认为是transition-duration属性值。11.3.3CSS3Animation动画10.动画复合属性animation例如，为段落元素p指定一系列动画效果:使用复合属性animation可简写为:p{animation-name:myAnimation;animation-duration:10s;animation-timing-function:ease-in;animation-delay:10s;}p{animation:myAnimation10sease-in10s;}11.3.3CSS3Animation动画10.动画复合属性animation还可以使用复合属性animation同时指定多种动画，之间用逗号隔开即可。例如:p{animation:myAnimation110sease-in10s,myAnimation210sease-in10s,myAnimation310sease-in10s;}11.3.3CSS3Animation动画【例11-18】CSS3Animation简单动画效果

CSS3可以将文本布局分割为多个列，实现仿报纸排版效果。11.4CSS3多列11.4CSS3多列主流浏览器对CSS3中的多列显示相关属性支持情况如下表所示。主流浏览器对CSS3多列显示的支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况10.0及以上版本9.0及以上版本4.0及以上版本6.0及以上版本缀15.0及以上版本

补充说明如下：Firefox：9.0-40.0版本支持使用前缀-moz-，写成-moz-columns的形式。Chrome：4.0-45.0版本支持使用前缀-webkit-，写成-webkit-columns的形式。Safari：6.0-8.0版本支持使用前缀-webkit-，写成-webkit-columns的形式。Opera：15.0-29.0版本支持使用前缀-webkit-，写成-webkit-columns的形式。11.4.1columns

CSS3中columns是一个复合属性，用于同时设置目标文本每列的宽度和列数。11.4.1columnscolumns语法结构如下：columns：<column-width><column-count>columns包含的两个参数解释如下：column-width：用于设置每列的宽度。可填入长度值用于指定每列的宽度。缺省值为auto，表示根据column-count属性自动分配宽度。column-count：用于设置文本分割的列数，可填入正整数用于指定