css基础知识7（新增属性，css3过渡及2D效果)

css3新增属性

1.背景属性（续）

在一个元素中添加多张背景图片
语法：{url(images/img1.jpg),url(images/img2.jpg),url(images/1.jpg); background-repeat:repeat-x,repeat-y,no-repeat;}
说明：第一个定义的背景图片是最上面的，最后定义的是最下面的，使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置的位置。
页面效果如图所示，第一张图片横向平铺，第二张图片纵向平铺：

2.边框属性

语法：border-raidus
说明：圆角边框
border-raidus:左上角 右上角 右下角 左下角
border-raidus：左上角右下角 右上角左下角（对角线）
border-top-left-raidus:左上角
border-top-right-raidus：右上角
border-bottom-left-raidus：左下角
border-bottom-right-raidus：右下角

语法：border-image:url(“url”) A B C D/borrder-image-width border-image-repeat
说明：让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制。
第一个参数作为边框使用图像的路径，A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距、左边距相同时可以缩写成一个，不需要单位。
border-width:表示边框的宽度；border-immage-repeat:表示图像边框是否应该平铺（repeat）、铺满（round）或拉伸（stretch）。

3.盒阴影

语法：box-shadow:h-shadow v-shadow blur spread color inset
说明：让盒在显示时产生阴影效果。
h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。
spread:阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影（outset）改为内部阴影。

css3过渡及2D效果

1.css3过渡

通过css3可以不使用Flash动画或JavaScript的情况下为元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点必须规定两项内容：
1）规定把效果加在哪个css属性上；
2）规定效果的时长。
IE10、FireFox、Chrome以及Oper支持transition属性。Safari和Chrome 25以及更早的版本需要前缀-webkit-。

transition：简写属性，用于在一个属性中设置四个过渡属性。
语法：transition-property：none|all|property；
说明：规定应用过渡的css属性的名称。
none 没有属性会获得过渡效果
all：所有属性会获得过渡效果
property：定义应用过渡效果的css属性名称列表，列表以逗号分隔。

语法：transition-duration：time；
说明：定义过渡效果的时间。默认是0。

语法：transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cublic-bezier(n,n,n,n);
说明：规定过渡效果的时间曲线。
linear：规定以相同速度开始至快结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in：规定以慢速开始的过渡效果。
ease-out：规定以慢速结束的过渡效果。
ease-in-out：规定以慢速开始和结束的过渡效果。
cubic-bezier(n,n,n,n)：在cubic-bezier函数中定义自己的值。可能的值是0到1之间的数值。

语法：transition-delay：time；
说明：规定过渡效果何时开始。默认是0。

2.2D变形

transform字面上就是变形、改变的意思。
在css3中transform主要包括以下几种：旋转rotate、扭曲（skew）、缩放（scale）和移动（translate）以及矩阵变形（matrix）。

语法：transform：none|rotate|scale|skew|translate|matrix；
说明：none表示不进行变换
可以同时对一个元素进行transform的多种属性操作，但transform中使用多个属性时需要有空格隔开。

旋转rotate
rotate（）：通过指定的角度参数对原元素指定一个2D rotate，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，设置的值为正数表示顺时针旋转，负数表示逆时针旋转。如：transform：rotate（30deg）；

改变元素基点transform-origin
语法：transform-origin：x-axis y-axis；
说明：在进行transform动作之前可以改变元素的基点位置，元素默认的基点就是其中心位置。其中X和Y的值可以是百分值，em，px，其中X还可以是字符参数值：left，center，right；Y和X一样除了百分值外还可以设置字符值top，bottom，center。

移动translate
1）translate（x,y）水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
2）translateX（x）仅水平方向移动（X轴移动）；
3）translateY（y）仅垂直方向移动（Y轴移动）。

缩放scale
1）scale（x,y）水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；
2）scaleX（x）仅水平方向缩放（X轴缩放）；
3）translateY（y）仅垂直方向缩放（Y轴缩放）。
缩放的中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之值小于1元素就缩小.

扭曲skew
1）skew（x,y）水平方向和垂直方向同时扭曲（也就是X轴和Y轴同时按照一定角度值进行扭曲变形）；
2）skewX（x）仅水平方向扭曲（X轴扭曲）；
3）skewY（y）仅垂直方向扭曲（Y轴扭曲）。