css3 一些属性

==text-shadow==

语法：text-shadow: x-offset y-offset blur-radius color

text-shadow:X 轴偏移量 Y轴偏移量 模糊半径 阴影颜色

兼容性，兼容标准浏览器， ie你懂的

=参数说明=

X 轴偏移量：是指阴影水平偏移量，其值可以是正负值，如果值为正值，刚阴影在对象右边，反之其为负值，阴影在对象的左边；

Y 轴偏移量：是指阴影的垂直偏移量，其值也可以是正负值，如果值为正值，则阴影在对象底部，反之为其负值，阴影在对象顶部；

阴影模糊半径：此参数是可选的，但其值只能为正值，如果其值为0时，表示阴影不具备模糊效果，其值越大阴影边缘越模糊；

阴影颜色：此参数是可选的，如果不设定任何颜色时，浏览器会取默认色值的，各浏览器不一样，特别是在webkit内核下的safari和chrome 浏览器解析为无色，也就是所谓的透明，所以还是别图省事哟，

=实际应用=

//css
.t-shadow{
    text-shadow:2px 2px 3px red;
}
.t-shadow2{
    text-shadow:3px 2px 0px red;
}
//html
<div class="t-shadow">
    文本阴影
</div><div class="t-shadow2">
    文本阴影
</div>

==box-shadow==

语法：box-shadow : inset x-offset y-offset blur-radius spread-redius color

box-shadow: 阴影类型 X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色

兼容性  ie9 及以上标准浏览器

=参数说明=

阴影类型：此参数是一个可选的，如果不设值，其默认投影方式是外阴影，如果取其唯一值inset，其投影方式为内阴影

x-offset： 阴影水平偏移量，其值可以是正负值，如果为正值，则阴影在对象右边，反之其值为负值时，阴影在对象左边；

y-offset：是指阴影的垂直偏移量，其值可是正负值，如果为正值，则阴影在对象底部，反之其值为负值时，阴影在对象顶部；

阴影模糊半径：此参数也是可选的，其值只能为正负值，如果为0时，不具备阴影效果，其值越大，阴影模糊半径越大；

阴影扩展半径：也是可选的，值也可以正负值，如果值为正，则整个阴影都延展扩大，反之则为负值，阴影缩小的

阴影颜色：可选，如果不设定，浏览器也是取默认的，有的还为透明，跟text-shadow 是一样的， 尽量不要图省事呀，得写个值哟

=实际应用=

//css
//第三个数值代表阴影模糊半径，如果省略就没有模糊效果，扩展半径默认就是有的
.b-shadow{
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin-left: 50px;
    -webkit-box-shadow:2px 2px 3px red;
    -moz-box-shadow:2px 2px 3px red;
    box-shadow:2px 2px 3px red;
}
//当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层
.b-shadow{
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin-left: 50px;
    -webkit-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;
    -moz-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;
    box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green;
}
//html
<div class="b-shadow">
    盒阴影
</div>

//如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。
.b-shadow{
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin-left: 50px;
    /*box-shadow: 0 0 5px red,0 0 15px blue;*/
    box-shadow: 0 0 15px red,0 0 5px blue;
}

//四边具有相同的阴影效果（只设置阴影模糊半径和阴影颜色）
.b-shadow{
    box-shadow:0 0 5px red;
}

//四边具有相同的阴影（只设置阴影扩展半径和阴影颜色）
.b-shadow{
     box-shadow:0 0 0 1px red;
}

//内阴影inset效果，但是img标签上直接应用box-shadow的inset是没有任何效果的
.b-shadow{
    box-shadow: inset 0 0 10px red;
}

img {box-shadow: inset 0 0 10px red;}// 不要这样做

//让图片img实现内阴影的方法，我们把img放到一个div中，然后不直接在img上运用box-shadow属性，而是在img的父元素div上运用box-shadow，接着我们在给img进行相对定位，并让其在父元素下一层
.b-shadow{
    /*width: 200px;
    height: 200px;*/
    /*border: 1px solid #ccc;*/
    margin-left: 50px;
    -webkit-box-shadow: inset 0 0 10px blue;
    -moz-box-shadow: inset 0 0 10px blue;
    box-shadow: inset 0 0 10px blue;
    display: inline-block;
}
.b-shadow img{
    position:relative; z-index:-1;
    display: block;
}

//让图片img实现内阴影的方法，我们换过一种实现方法，这种方法我们是在img父元素上应用伪元素“:before”来实现
.b-shadow{
    position: relative;
    display: inline-block;
    *display: inline;
}
.b-shadow:before{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    -moz-box-shadow:inset 0 0 5px 1px blue;
    -webkit-box-shadow: inset 0 0 5px 1px blue;
    box-shadow: inset 0 0 5px 1px blue;
 }
 .b-shadow img {
     display: block;
 }

//给body顶部增加一个阴影
body:before {
     content:"";
      position:fixed;
     top: 10px;
     left: 0;
     width: 100%;
     height: 10px;
     z-index: 999;
      box-shadow: 0 0 10px red;
}

//Drop-shadow效果
.b-shadow{
            width: 300px;
            height: 150px;
            position: relative;
            background: #ccc;

        }
        .b-shadow:before,.b-shadow:after {
            content: "";
            position: absolute;
            z-index: -1;
            bottom: 15px;
            left: 10px;
            width: 50%;
            height: 20%;
            /*add box-shadow*/
             -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
             -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
             box-shadow: 0 15px 10px rgba(125,125,125,0.8);
             /*add css3 transform*/
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }
        .b-shadow:after {
            right:10px;
            left: auto;
            -webkit-transform:rotate(3deg);
            -moz-transform:rotate(3deg);
            -o-transform:rotate(3deg);
            transform:rotate(3deg);
        }

==transform==

语法：transform：rotate(旋转) || translate(移动) || scale(缩放) || skew(扭曲) || matrix(矩阵)

兼容性：ie9 及以上

transform 的意思是变形，改变的意思， 在css3 中transform 主要包换一下属性：旋转 rotate、移动translate、绽放scale、扭曲skew 以及矩阵变形matrix

如果同时对一个元素进行transform多个属性 如 rotate, translate scale, 三种，多个属性之间用空格隔开，空格哟，亲，transform实现了一些可以用svg实现的同样功能，他可用于行元素和块元素

一、旋转rotate

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

二、移动translate

移动translate分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下：

1、translate(tx,ty) 表示对象按照设定的x,y参数值进行平移，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项，如果ty未被提供，则ty以 0 作为其值。当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px)

2、translateX(tx) ： 通过给定一个X方向上的值指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px)

3、translateY(ty) ：通过给定一个Y方向上的值指定一个translation。只向Y轴进行移动，基点在元素中心点，也可以通过transform-origin改变基点位置。如：transform:translateY(20px)

三、缩放scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩 放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中 心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。

1、scale(<number>[, <number>])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D 缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示 X，Y两个方向的缩放倍数是一样的，并以X为准。如：transform:scale(2,1.5)

2、scaleX(<number>) ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1)，其基点一样是在元素的中心位置，我 们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2)

3、scaleY(<number>) ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform- origin来改变元素的基点。如transform:scaleY(2)

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值 进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

1、skew(<angle> [, <angle>]) ：X轴Y轴上的skew transformation（斜 切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一 个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为 基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg)

2、skewX(<angle>) ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)

3、skewY(<angle>) ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）

五、矩阵matrix

transform: matrix(a,b,c,d,e,f);实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。

了解更多http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

六、另外我们需要理解改变元素基点transform-origin

transform-origin  它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其 中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有 点像我们background-position设置一样。其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。

transform-origin:(left,top); transform-origin:right; transform-origin(25%,75%);

这里还要提醒大家一点的是，transform-origin并不是transform中的属性，他具有自己的语法，transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀，下面列出各种浏览器内核下的语法规则：

transform -origin在不同浏览器内核下的书写规则
//Mozilla内核浏览器：firefox3.5+
  -moz-transform-origin: x y;
  //Webkit内核浏览器：Safari and Chrome
  -webkit-transform-origin: x y;
  //Opera
  -o-transform-origin: x y ;
  //IE9
  -ms-transform-origin: x y;
  //W3C标准
transform-origin: x y ;

transform在不同浏览器内核下的书写规则
//Mozilla内核浏览器：firefox3.5+
  -moz-transform: rotate | scale | skew | translate ;
  //Webkit内核浏览器：Safari and Chrome
  -webkit-transform: rotate | scale | skew | translate ;
  //Opera
  -o-transform: rotate | scale | skew | translate ;
  //IE9
  -ms-transform: rotate | scale | skew | translate ;
  //W3C标准
transform: rotate | scale | skew | translate ;

==Transition==

Transition:transition-property || transition-duration || transition-timing-funciton || transiton-delay

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

一、transition 的各项属性
transition主要包含四个属性值：transition-property（执行变换的元素属性），transition-duration（执行变换的持续时间），transition-delay（延迟多长时间开始执行变换），transition-timing-function（变换速度，默认不是匀速的，而是逐渐变慢）
1、transition-property 用来指定元素中的哪些属性来执行变换过程，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（指定元素属性名）。
2、transition-duration 用来指定元素变换过程的持续时间，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换是即时的。
3、transition-delay 用来指定动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果。也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。
4、transition-timing-function 用来指定状态的变换速度，默认不是匀速的，而是逐渐变慢，这叫做ease，其主要有以下6个值：
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（加速然后减速）
cubic-bezier：（该值允许你去自定义一个时间曲线）

二、transition的使用注意
1、有时我们不只改变一个css属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串 在一起，用逗号（,）隔开，然后各自可以有不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-duration与 transition-delay的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为 transition-duration，第二个transition-delay。
2、在应用transition时我们有必要加上浏览器的前缀，最好在加上我们W3C的标准写法，这样标准的会覆盖前面的写法
3、不是所有的CSS属性都支持transition
4、transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到 100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是 height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

三、transition的局限性
transition的优点在于简单易用，但是它有几个很大的局限。
1、transition需要事件触发，所以没法在网页加载时自动发生。
2、transition是一次性的，不能重复发生，除非一再触发。
3、transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

四、transition的实际应用
<a id="timings-demo-btn">click</a>
<div id="timings-demo">
<div id="ease" class="demo-box">Ease</div>
</div>
/* 默认样式 */
.demo-box {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 10px;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
background: #f36;
}
/* hover状态下或单击click按钮后demo-box产生属性变化 */
#timings-demo.timings-demo-hover .demo-box,#timings-demo:hover .demo-box {
width:300px;
background: #369;
border: 1px solid rgba(255,230,255,08);
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}

==Animation==

Animation:animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction

一、keyframes（关键帧）的语法
Keyframes具 有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式 规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在 这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素 颜色，位置，大小，形状等。
不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百 分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。其具体写法如下：
@-webkit-keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式：
@-webkit-keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}

二、如何给一个元素调用animation 属性
CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件 (hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性。
.demo1 {
width: 50px;
height: 50px;
margin-left: 100px;
background: blue;
-webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}

三、animation 的各项属性
1、animation-name用来定义一个动画的名称，其主要有两个值：IDENT是由Keyframes创建的动画名，此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。
2、animation-duration 用来指定元素播放动画所持续的时间长

3、animation-timing-function 用来指定动画播放的速率，它和transition-timing-function的用法一样，具有以下六种变换方式：ease;ease-in; ease-out;ease-in-out;linear;cubic-bezier。
4、animation-delay用来指定元素动画开始时间，这个属性和transition-delay使用方法是一样的。
5、animation-iteration-count用来指定元素播放动画的循环次数，可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
6、animation-direction用来指定动画播放的方向，动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。其取值有以下几个：normal（默认值），如果设置为normal时，动画的每次循环都是向前播放；reverse （反向播放）；alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。简单说，animation-direction指定了动画播放的方向，最常用的值是normal和reverse。浏览器对其他值的支持情况不佳，应该慎用。

7、animation-fill-mode动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。其取值有以下几个：
none：默认值，回到动画没开始时的状态；
forwards表示让动画停留在结束状态；
backwards：让动画回到第一帧的状态；
both: 根据animation-direction（见后）轮流应用forwards和backwards规则；

8、animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认 值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的 重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少 内核支持，所以只是稍微提一下。

待续----