瀏覽器首碼： css3屬性：預覽版，還沒有最終版，所以有很多相容性問題，瀏覽器不識別。 瀏覽器為了使這些屬性相容，每個瀏覽器廠商都提供了一個屬於自己瀏覽器的語法規則，瀏覽器相容首碼。 主流瀏覽器：谷歌，IE，歐朋，火狐，蘋果 瀏覽器首碼： -wekit- 谷歌 -moz- 火狐 -ms- IE -o ...
瀏覽器首碼：
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();
