CSS3基础

2021-12-25 10:21 LoYan 阅读(226) 评论(0) 收藏举报

CSS3的概念和优势

CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分角为一些小的模块，更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果(譬如动态和渐变)，而且可以很简单的设计出现在的设计效果(比如说使用分栏)

渐进增强和优雅降级

渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别：
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充以适应未来环境的需要。降级(功能衰减)意味着往回看:而渐进增强则意味
着朝前看，同时保证其根基处于安全地带。

一、层级选择器

E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

二、属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值；
2、E[attr="value"]：指定属性名，并指定了该属性的属性值；
3、E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“一”不能不写；
扩展知识
4、 E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5、E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6、E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

三、伪类选择器

1、结构性伪类选择器

X：first-child 匹配子集的第一个元素。IE7就可以支持
X：last-child 匹配父元素中最后一个X元素
X：nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
X：only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X：root 匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中，根元素永远是HTML
X：empty 匹配没有任何子元素(包括包含文本)的元素X

2、目标伪类选择器

E：target 选择匹配的所有元素，且匹配元素被相关URL指向

3、U1元素状态伪类选择器

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

4、否定伪类选择器

E:not(s)(1E6-8浏览器不支持:not()选择器。)
匹配所有不匹配简单选择符s的元素E

5、动态伪类选择器

E:link

链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover
用户行为选择器

选择匹配的E元素，目用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover

文本阴影

文本阴影属性语法及应用

text-shadow：2px 2px 2px red;
：水平阴影位置垂直阴影位置阴影模糊距离阴影颜色

说明：水平、垂直阴影的位置允许负值可进行多阴影设置

box-shadow盒子阴影

属性值:

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

blur 　　　可选。模糊距离可选。阴影的大小

spread 　可选。阴影的大小

color 可选。阴影的颜色。

inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

Eg：box-shadow：10px 10px 5px #888888

字体引入

字体模块：@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在IE4就支持)

@font-face的语法规则:

@font-face{

font-family:<YourWebFontName>;

src: <source> [<format>][,<source> [<format>]]*,

[font-weight: <weight>];

[font-style: <style>];

@font-face语法说明:

1、YourWebFontName：此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你 Web元素中的font-family。如“font-family:"YourWebFontName";"

2、source：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

怪异盒模型

含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改

属性:box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

属性值:content-box

这是由CSS21规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

标准盒子模型

属性值:border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

怪异盒模型(IE盒模型)

移动端布局

布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等

视觉视口：视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗的宽度，下面通过图2演示什么是视觉视口。

理想视口

多列布局

1、column-count

说明:

属性规定元素应该被分隔的列数

适用于:除table外的非替换块级元素,tablecells,inline-block元素

2、column-gap

说明:

说明：属性规定列之间的间隔大小

3、column-rule

说明:

设置或检索对象的列与列之间的边框。复合属性。

column-rule-color 规定列之间规则的颜色。

column-rule-style 规定列之间规则的样式。

column-rule-width 规定列之间规则的宽度。

4、 column-fill

说明:

设置或检索对象所有列的高度是否统一

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一

5、column-span

说明:

设置或检索对象元素是否横跨所有列。

none：不跨列

all：横跨所有列

6、column-width

说明:

设置或检索对象每列的宽度

响应式布局

常见的布局方案

固定布局：

以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

可切换的固定布局：

同样以像素作为页面单位，参考主流设备尺寸，设计儿套不同宽度的布高。通过识别的屏幕尺寸或叔览器宽度选择最合适的那套宽度布局；

弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;

混合布局：

同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

布局响应：

对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先(从pc端开始向下设计)；移动优先(从移动端向上设计)；无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要时模块布局做一些变化(发生布局改变的临界点称之为断点)

响应式布局特点

设计特点:

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点:

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

媒体查询的含义:

媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color(等)。使用媒体查询，可以在不改变页可内容的情况下，为特定的一些输出设备定制显示效果。

1、媒体查询操作方式

实际操作为:对设备提出询问(称作表达式)开始，如果表达式结果为真，媒体查询中的CSS被应如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询结构

@media all and (min-width：320px){

body { background-color：blue;}

}

3、设备类型(默认为all)

media_type　设备类型说明

all 　　　　　所有设备

aural　　听觉设备

braille 　　　点字触觉设备

handled 　　便携设备,如手机、平板电脑

print 打印预览图等

projection 投影设备

screen 显示器、笔记本、移动端等设备

tty 如打字机或终端等设备

tv 电视机等设备类型

embossed 盲文打印机

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型 and 被称为关键字，其他关键字还包括not(排除某种设备)，only(限定某种设备) (min-width：400px)就是媒体特性,其被放置在一对圆括号中。

/*PC客户端或大屏幕设备:1028px至更大

*/@media only screen and (min-width：1029px){}

/*竖屏*/

@media screen and(orientationportrait)and(max-width：720px){对应样式)

/*横屏*/

@media screen and(orientation:landscape){对应样式}

渐变

CSS3 渐变

CSS3渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前你必须使用图像来实现这些效果，现在通过使用CSS3的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由汉制览器生成的。

1、线性渐变

语法：background: linear-gradient(direction,color-stop1,color-stop2....);

说明：direction:默认为tobottom，即从上向下的渐变;

stop:颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。

示例1:to left,top right to bottom to top

div { background：linear-gradient（to left，red，blue）}

div { background：linear-gradient（to right，red， blue）}

div { background：linear-gradient（to bottom，red，blue）}/* 浏览器默认值*/

div { background;linear-gradient（to top，red，blue）}

分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色-绿色”渐变

2、径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而而径向渐变是从“一个点”向四周的颜色渐变

语法： background：radial-gradient（center， shape，size，start-color，...， last-color）；

说明：center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。cosest-side：最近边；

farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角

示例1:多颜色点均匀分布

div { background：radial-gradient(red，green，blue)；}

以中心（50% 50%）为起点，到最远角(farthest-corner)，从red到green、blue的均匀渐变

EG：div {background：-webkit-radial-gradient（50% 50%，farthest-corner，red，green，blue)；} 或 div {background:-webkit-radial-gradient(center，farthest-corner，red，green，blue); }

示例2:多颜色节点不均匀分布

div { background：radial-gradient（red 5%，green 15%，blue 60%）; }

示例3:设置渐变形状

div { background: radial-gradient（circle，red， yellow， green）； }

div { background: radial-gradient（ellipse，red，yellow，green）；}

circle：渐变为最大的圆形；ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异。

示例4:不同尺寸的渐变

size指定了渐变的大小，即渐变到哪里停止，它有四个值。

closest-side:最近边;farthest-side:最远边;closest-corner:最近角;farthest- orner:最远角

div { background: radial-gradient(60%40%,closest-side,blue,green,yellow, black); }

div { background: radial-gradient(60% 40%,farthest-side,blue, green, yellow,black); }

div { background: radial-gradient(60% 40%,closest-corner, blue, green, yellow, black); }

div { background: radial-gradient(60%40%,farthest-corner, blue, green,yellow,black); }

3、重复渐变

(1)重性线性渐变

div { background：repeating-linear-gradient（red，yellow 10%，green 20%）；}

说明:10%的位置为yellow，20%的位置为green，然后按照这20%向下重复

(2)重复性径向渐变

div { background：repeating-radial-gradient（red，yellow 10%，green 20%）；}

transition过渡

复合属性:transition 取值:all 5s linear 3s

含义：css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标自击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值

all======单一属性:transition-property:检索或设置对象中的参与过渡的属性

5s======单一属性:transition-duration:检索或设置对象过渡的持续时间

3s======单一属性:transition-delay:检索或设置对象延迟过渡的时间

linear====单一属性:transition-timing-function:检索或设置对象中过渡的动画类型

简写:

transition:all/具体属性值运动时间s/ms延迟时间s/ms动画类型

transition-timing-function:检索或设置对象中过渡的动画类型

贝塞尔曲线:

属性值:cubic-bezier()贝塞尔曲线网址:http://cubic-bezier.com/ 逐帧动画:t ansition-timing-function:steps(动画执行的步数);

2D属性-transform

1、translate（）

将元素向指定的方向移动，类似于position中的relative。

水平移动：向右移动translate（tx，0）和向左移动translate（-t，x0）;

垂直移动：向上移动translate（0，-ty）和向下移动translate（0，ty）;

对角移动：右下角移动translate（tx，ty）、右上角移动translate（tx，-ty）、左上角移动translate（-t>，ty）和左下角移动translate(-tx，ty)。

translateX（）：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动如果值为负值，对像向左移动。translateY(:纵轴方向移动一个对象。对象只向Y

轴进行移动，如果值为正值，对象向下移动;如果值为负值，对像向上移动。

这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。

所以

transform：translate（-100px，0）实际上等于transform：translateX（-100px）；

transform：translate（0-100，px）实际上等于transform：translateY（-100px）。

设置left 属性会频繁的造成浏览器回流重排，而transform和opacity 属性不会，因为它是是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下

　• 可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常快。

　• 动画不再绑定到CPU重排，而是通过GPU合成图像。即使运行一个非常复杂的Ja vaScript任务，动画仍然会很快运行。

设置left-合成图层

设置translate-独立图层

2、scale()

让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩 ;而任何大于或等于1.01的值，让元素显得更大。

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。

例如，

scale（1，1）元素不会有任何变化，而scale（2，2）让元素沿X轴和Y轴放大两倍。

scaleX（）：相当于scale（sx1）。表示元素只在X轴（水平方向）缩放元素，其默认值是1。

scaleY（）：相当于scale（1sy）。表示元素只在Y轴（纵横方向）缩放元素，其默认值是1。

3、rotate（）

旋转rotate（）函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内这生行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转;如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX()方法，元素围绕其X轴以给定的度数进行旋转

rotateY()方法，元素围绕其Y轴以给定的度数进行旋转

4、 skew()

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

一个参数时:表示水平方向的倾斜角度;

两个参数时:第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

5、transform-origin

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了trans form属性的时候起作用;

因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotatetranslate.scaleskew等操作都是以元素自己中心位置进行变化的。

2D 转换元素能够改变元素x和y轴

关键帧动画

animation和transition的区别

相同点:

都是随着时间改变元素的属性值。

不同点:

transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;而an mation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

animation

animation复合属性。检索或设置对象所应用的动画特效。

　　　　1.animation-name 检索或设置对象所应用的动画名称 　　　　　　　　　　　　　　　　

说明:

必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove

　　　　2.animation-duration 检索或设置对象动画的持续时间 　　　　　　　　　　　　　　　　　

说明:

animation-duration:3s;动画完成使用的时间为3s

　　　　3.animation-timing-function 检索或设置对象动画的过度类型　　　　　　　　　　　　　　

说明:

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）

　　　　4.animation-delay 检索或设置对象动画延迟的时间　　　　　　　　　　　　　　　　　　

说明：

animation-delay：0.5s;动画开始前延迟的时间为0.5s)

　　　　5.animation-iteration-count 检索或设置对象力画的循环次数　　　　　　　　　　　　　

说明：

animation-iteration-count：infinite丨number

infinite：无限循环

number：循环的次数

　　　　6.animation-direction 检索或设置对象动画在香环中是否反向运动　　　　　　　　　　　

说明：

normal：正常方向 reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

　　　　7.animation-play-state 检索或设置对象动画的状态　　　　　　　　　　　　　　　　　　

说明:

animation-play-state：running|paused;

running：运动

paused：暂停

animation-play-state：paused; 　　当鼠标经过时动画停止，鼠标移开动画继续执行

3D属性

什么是3d的场景呢？2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于3d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

CSS3中的3D变换主要包括以下几种功能函数:

3D位移:

CSS3中的3D位移主要包括translateZ（）和translate3d(两个功能函数:

3D旋转:

CSS3中的3D旋转主要包括rotateX（）、rotateY（）、rotateZ（）和rotate3d（）四个功能函数

3D缩放:

CSS3中的3D缩放主要包括scaleZ（）和scale3d（）两个功能函数

景深

　　　　生活中的3d 区别于2d的地方　　　　　　　　　　　　　　　　　　　　　　　　

近大远小景深

程序中实现的方法perspective元素距离视线的距离(物体和眼睛的距离越小，近大远小的效果越日显)

perspective：1200px;(在父元素中使用)

transform：perspective(1200px)(在子元素中使用)

两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间

如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

　　　　perspective-origin；　　　　　　　　　　　　　　　　　　　　　　　　　　　

观察3d元素的(位置)角度perspective-origin:center center(中心)

perspective-origin：left top（左上角）

perspective-origin：100% 100%（右下角）

　　　　transform-style属性　　　　　　　　　　　　　　　　　　　　　　　　　　　

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个月性值:flat和preserve3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。

也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行量现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。

1、3D位移

在CSS3中3D位移主要包括两种函数translateZ（）和translate3d（）。translate3d()函数使一个元素在三维空间移动。

语法：translate3d（tx，ty，tz）

tx:代表横向坐标位移向量的长度;

ty:代表纵向坐标位移向量的长度;

tz:代表Z轴位移向量的长度。

此值不能是一个百分比值，如果取值为百分比值，将会认为无效值

ranslateZ()函数的功能是让元素在3D空间沿Z轴进行位移。

语法：translateZ（t）

t：指的是Z轴的向量位移长度。

2、 3D旋转

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数:rotateX()、rotateY()、rotat Z()和rotate3d（x，y，z，a）。

　　　　rotateX(a)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

rotateX( )函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度;如果值为正值，元素围绕X轴顺时钱旋转;反之，女如果值为负值，元素围绕X轴逆时针旋转。

　　　　rotateY(a)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

rotateY( )函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度;如果值为正值，元素围绕Y轴顺时旋转;反之，如果值为负值，元素围绕Y轴逆时针旋转。

　　　　rotateZ(a)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

rotateZ0函数和其他两个函数功能一样的，区别在于rotateZ0函数指定一个元素围绕Z轴旋转。

　　　　rotate3d(x,y,z,a)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

X：是一个0到1之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个0到1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个0到1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3、3D缩放

CSS33D变形中的缩放主要有scaleZ()和scale3d()两种函数，当scale3d()中X轴和Y轴同时为1，即 scale3d(1，1，sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为1，当值大于1时，元素放大，反之小于1大于(01时，元素缩小
　　　　scale3d(sx,sy,sz)　　　　　　　　　　　　　　　　　　　　　　　　　　
sx:横向缩放比例; sy:纵向缩放比例; SZ:Z轴缩放比例;
　　　　scaleZ(s)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
s:指定元素每个点在Z轴的比例。
注:scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果