瀏覽器字首：
css3屬性：預覽版，還沒有最終版，所以有很多相容性問題，瀏覽器不識別。
瀏覽器為了使這些屬性相容，每個瀏覽器廠商都提供了乙個屬於自己瀏覽器的語法規則，瀏覽器相容字首。
主流瀏覽器：谷歌，ie，歐朋，火狐，蘋果
瀏覽器字首：
-wekit- 谷歌
-moz- 火狐
-ms- ie
-o- 歐朋
盒子陰影：
box-shadow:0px 0px 0px 0px red;
水平偏移量，垂直偏移量，模糊度，影子大小，顏色
css3漸變：由瀏覽器生成，
線性漸變：
1、單一方向漸變
background:-wbkit-linear-gradient(方向，顏色1，顏色2，顏色3);
方向：left 從左邊開始
right 從右邊開始
top 從上邊開始
bottom 從下邊開始
【注】需要新增瀏覽器字首
background:linear-gradient(to 方向，顏色1，顏色2，顏色3);
to left 到左邊（結束）
to right
to top
to bottom
【注】不要新增瀏覽器字首
2、對角漸變
background:-wbkit-linear-gradient(方向 方向，顏色1，顏色2，顏色3);
left top 從左上角到右下角漸變
left bottom
right top
right bottom
【注】需要新增瀏覽器字首
background:linear-gradient(to 方向 方向，顏色1，顏色2，顏色3);
to left top
to left bottom
to right top
to right bottom
【注】不要新增瀏覽器字首
3、角度的漸變
10deg 10度
4、預設情況下顏色均分
可以指定顏色分布的百分比
background:-wbkit-linear-gradient(left,red 10%,green 40%,blue);
從10%開始漸變，前10%都是red
background:linear-gradient(to left,red 10px,green,blue);
從10px處開始漸變，前10px都是red
徑向漸變：（一定要加瀏覽器字首）
從乙個點到四周的漸變
background:-wbkit-radial-gradient(漸變位置，形狀，大小，顏色1，顏色2，顏色3);
漸變位置：預設從中心到四周
left 從左邊漸變
right
top
bottom
left top 從左上角到四周漸變
left bottom
right top
right bottom
形狀：預設橢圓 ellipse
正圓 circle
【注】元素是正方形，則都是正圓
大小：size，漸變的大小，即漸變到**停止，它有四個值
closest-side:最近邊;
farthest-side:最遠邊;
closest-corner:最近角;
farthest-corner:最遠角;
漸變重複：
線性漸變
background:repeating-linear-gradient(to left,black 10%,white 20%);
-wbkit-background:repeating-linear-gradient(right,black 10%,white 20%);
徑向漸變
background:repeating-radial-gradient:(right,black 10%,white 20%);
【注】漸變用的背景屬性是background-image:;
過渡：讓元素的動畫產生平滑的效果
1、什麼屬性在做動畫 transition-property:屬性1，屬性2，...；
2、過渡時間需要多久 transition-duration:0.5s;
3、延遲時間(選寫) transition-delay:2s;
4、動畫型別(預設勻速) transition-timing-function:;
綜合寫法：
transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫型別
css3中的2d
二維的平面空間
css3 2d屬性
變形屬性transform:;
2d變換
位移transform:translate(水平位移，垂直位移); 乙個值預設只有水平位移
transform:translatex(10px); 水平位移
transform:translatey(10px); 垂直位移
【注】正值，從上往下從左往右
旋轉transform:rotate(); 預設中心旋轉
transform-origin:left top; 設定旋轉基點
transform-origin:5px 10px;
縮放transform:scale(水平垂直都縮放的倍數); 乙個值
transform:scale(水平縮放，垂直縮放); 兩個值
transform:scalex(水平縮放);
transform:scaley(垂直縮放);
傾斜：transform:skew(水平傾斜); 乙個值
transform:skew(水平傾斜，垂直傾斜); 兩個值
transform:skewx();
transform:skewy();
CSS 過渡 轉換 動畫模組
1 作用 修改a標籤不同狀態的樣式 2 a 標籤的四種狀態 3 注意點 4 練習總結 1 基本使用 div 2 其他屬性 3 連寫 4 彈性效果和手風琴效果的練習 1 平移 transform translate x，y 2 旋 transform rotate 45deg 3 縮放 transfo...
複習（css過渡與動畫）
用於在乙個屬性中設定四個過渡屬性。div div hover 效果 當滑鼠移上去的時候這個正方形的寬度會增加 300 畫素 實現四個功能 旋轉，傾斜，縮放，位移 div div hover translate x y 位移 rotate 旋轉 transform rotate 角度deg 負 右 正...
css的過渡與漸變
漸變 一 線性漸變 從乙個方向到另乙個方向的顏色的變化。標準模式的語法 不新增瀏覽器字首 background linear gradient direction,color stop1,color stop2,說明 direction 預設為to bottom，即從上向下的漸變 stop 顏色的分...