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;  //子元素