《Web前端开发》第9章 CSS3.pptx

第9章CSS3

前面讲解的CSS属性大部分是CSS2标准，本章将介绍CSS3新增加的属性和规则。CSS3会让网页更美观，例如对元素设置圆角边框和阴影，可以取得原有图片处理软件才可以达到的效果；过渡、2D、3D变换、动画等，可以取得JavaScript才能实现的动态效果。由于这些特性是逐渐获得浏览器支持，所以不同浏览器或其不同版本，对新特性的支持度各不相同，有时需要在属性名前面添加浏览器前缀，以便得到正确解析。常用的浏览器内核前缀如表9-1所示。引言

9.1边框和阴影9.1.1圆角边框border-radius属性用于添加元素的圆角边框，如图9-1所示，格式如下：border-radius:水平方向取值垂直方向取值;（1）这两个值共同决定圆角的形状；如果两个值相同，则可以合并成一个。（2）border-radius属性可以分为四个方向的子属性。

例如，如下代码可以产生如图9-2所示的效果。div{height:100px;width:150px;border:1pxsolidblue;border-top-left-radius:40px20px;/*左上角：水平40px，垂直20px，形成1/4椭圆角*/border-bottom-right-radius:20px;/*右下角：水平20px，垂直20px，形成1/4圆角*/}9.1边框和阴影

9.1.2盒子阴影box-shadow用于添加元素的阴影，格式如下：box-shadow:inset|outset水平偏移垂直偏移模糊距离颜色;(1)inset|outset：outset默认值，外部阴影；inset可选，内部阴影。(2)模糊距离决定了阴影沿偏移边界每侧的模糊范围，值越大，模糊的范围越大。(3)box-shadow取值可以为多个，即添加多重效果，逗号隔开即可。例如，如下的代码可以产生如图9-3（a）（b）所示的效果。box-shadow:10px10px5pxrgba(0,0,0,0.5);/*外部阴影，黑色半透明*/box-shadow:005pxorangeinset; /*内部阴影，橙色*/9.1边框和阴影

【例9-1】应用圆角和多重阴影，完成如图9-4所示的按钮。

9.2文本与文字9.2.1文本阴影text-shadow属性用于添加文本阴影，格式如下：text-shadow:水平偏移垂直偏移阴影大小颜色;例如，如下的代码可以产生如图9-5所示的效果。h1{color:white;text-shadow:2px2px4px#000;}

9.2.2Web文字每种字体都对应着字体文件，没有@font-face规则之前，客户端是否能够正确显示font-family规定的字体，是由该字体文件是否预装在客户端决定的。而@font-face规则可以将字体文件放在服务器端，渲染页面时客户端请求从服务器端下载该字体文件进行使用。1.字体文件不同浏览器支持不同字体文件格式，在应用Web字体前，需要生成同一种字体的不同格式文件。9.2文本与文字

2.@font-face规则Web字体首先用@font-face规则定义字体名称和来源，然后再用font-family引用该字体。语法格式如下：见【例9-2】9.2文本与文字

【例9-2】应用text-shadow和@font-face规则，完成如图9-6所示的Web文字9.2文本与文字

9.32D和3D变换9.3.12D变换2D变换通过transform属性取值为不同方法，可以对元素进行移动translate、旋转rotate、缩放scale、倾斜skew，如表9-3所示。

例如，如下代码可以产生如图9-7所示的效果。transform:translate(50px,50px); /*沿X轴移动50px，Y轴移动50px*/transform:rotate(30deg); /*顺时针旋转30°*/transform:scale(0.5,2); /*宽度缩小为原来一半，高度放大为原来2倍*/transform:skew(10deg,30deg); /*沿X轴倾斜10°，Y轴倾斜30°*/9.32D和3D变换

9.3.23D变换1.概述2D变换能够改变元素X和Y轴方向特性，3D变换还能改变Z轴，并可以通过设置透视关系，使元素具有透视效果。三维坐标系如图9-8所示。图9-83D变换坐标系图9-9视角9.32D和3D变换

3D变换常见的属性如表9-4所示。9.32D和3D变换

其中，transform属性常见方法可以进行三维旋转