css3的随想

各个浏览器都有本身的内核，为了兼容属性，须要在各自标准中加上一个前缀：

-moz-  火狐 

-webkit- 谷歌

-ms-     IE

-o-    opera

transform 的属性有如下：

transform : rotate(45deg);   //旋转的度数

transform : translate(20px,30px);  //元素移动，2个参数分别表明X,Y的值

transform : scale(1.5);    //元素放大或缩小  参数有2个分别表明延X,Y轴放大 。常跟hover搭配用

transform : skew(20deg);   //斜切变化

transform-origin：10px 10px ;   //基准点  有2个参数；

transition : all 1s ease-out 0s;

第一个参数为CSS属性的名称

第二个参数过渡效果花费的时间。默认为0   ->通常都设置它

第三个参数过渡效果的时间曲线  例如如由快变慢  默认ease

第四个参数过渡时间从什么时候开始   例如设置5s，默认为0

ps:通常这两个属性搭配用！

如今在来谈谈强大的animation

animation (all 5s ease 0s  infinite alternate)

@keyframes all    //关键帧+动画名

{

form {left:0px;}

to{left:400px;}

}

如今来谈谈这6个参数分别表明什么

第一个参数为绑定选择器keyframe的名字

第二个参数为完成动画的时间

第三个参数为动画的速度曲线(如先快后慢)

第四个参数为动画延迟开始的时间

第五个为动画播放的次数(infinite是无限次播放)

第六个参数为动画是否反向播放(alternate为反向播放)

text-shadow:5px 5px 3px #fff;  文字阴影  

参数1  x轴偏移

参数2  y轴偏移

参数3   模糊半径

参数4    颜色

box-shadow  :

它的值包括 6 个参数，X轴位移，Y轴位移，模糊距离，阴影的尺寸和阴影颜色和阴影类型。此 6 个参数能够有选择地省略。

浏览器兼容性

Webkit支持：-webkit-box-shadow

Mozilla支持：-moz-box-shadow

IE9支持：box-shadow

IE8及之前：不支持

实用实例

简单效果:

img{

      height:300px;

      -moz-box-shadow:5px 5px;

      -webkit-box-shadow:5px 5px;

      box-shadow:5px 5px;

}

虚阴影效果:

img{

      height:300px;

      -moz-box-shadow:2px 2px 10px #06c;

      -webkit-box-shadow:2px 2px 10px #06c;

      box-shadow:2px 2px 10px #06c;

}

渐变阴影效果:

img{

      height:300px;

      -moz-box-shadow:0 0 10px #06c;

      -webkit-box-shadow:0 0 10px #06c;

      box-shadow:0 0 10px #06c;

}

带光晕效果

img{

      height:300px;

      -moz-box-shadow:0 0 10px 10px #06c;

      -webkit-box-shadow:0 0 10px 10px #06c;

      box-shadow:0 0 10px 10px #06c;

}

内阴影效果

img{

      height:300px;

      -moz-box-shadow:inset 5px 5px 10px #06c;

      -webkit-box-shadow: inset 5px 5px 10px #06c;

      box-shadow: inset 5px 5px 10px #06c;

}

彩色阴影

img{

      height:300px;

      -moz-box-shadow:0 0 10px red,

                                  2px 2px 10px 10px yellow,

                                  4px 4px 12px 12px green;

      -webkit-box-shadow:0 0 10px red,

                                  2px 2px 10px 10px yellow,

                                  4px 4px 12px 12px green;

      box-shadow:0 0 10px red,

                                  2px 2px 10px 10px yellow,

                                  4px 4px 12px 12px green;

}

display:box ；display:-moz-box ；display:-webkit-box ；//父元素

   -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;  //子元素