1：css3屬性具有相容性，不相容ie9以下瀏覽器，ie9部分相容。
2：各大瀏覽器的核心相容寫法？
ie -ms-
火狐 -moz-
歐朋 -o-
谷歌 -webkit-
3:css3屬性和標籤更主要是用在移動端
4：文字陰影引數x 橫向偏移
y 縱向偏移
blur 模糊距離
color 陰影顏色
文字陰影如果加很多層，會很卡很卡很卡
例子：層疊：color:red;
font-size:100px;
font-weight:bold;
text-shadow:2px 2px 0px white, 4px 4px 0px red;
光暈：color:white;
font-size:100px;
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de,
0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font-family:verdana, geneva, sans-serif;
font-size:100px;
font- weight:bold; color:white;
5：文字描邊6:文字排列
direction 定義文字排列方式(全相容)
rtl 從右向左排列
ltr 從左向右排列
注意要配合unicode-bidi:bidi-override; 一塊使用
7：省略號clip 無省略號
ellipsis 省略號 (注意配合overflow:hidden和white-space:nowrap一塊使用)
舉例：*-*1111
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
8: 背景陰影：box-shadow: 20px 20px 20px yellow, 30px 30px 30px green;
9:背景漸變：普通漸變 linear
徑向漸變 radial
background:-webkit-linear-gradient(top,yellow,blue);
background:-webkit-linear-gradient(left,yellow,blue,green,pink);
background:-webkit-linear-gradient(top right,yellow,blue,green,pink);
background:-webkit-linear-gradient(top right,yellow 50%,blue 20%,green 30%,pink);
background:-webkit-linear-gradient(top,yellow 200px,blue 100px,);
background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));
background: -webkit-radial-gradient(50%,yellow, red,blue,pink,green);
10：transform:變換/變形translate:移動
translate(x px,y px);
rotate:旋轉/負值就是倒轉;
rotate(-360deg);
scale:縮放
scale(x,y)
skew:扭曲
skew(x deg,y deg)
11：transition:過渡transition-duration: 3s;
過渡屬性(定義寬還是高)
transition-property: all;
過渡函式(運動的方式)
transition-timing-function: ease;
過渡延遲時間
transition-delay: 4s;
12：動畫屬性animation-name:動畫的名字
animation-duration:動畫完成乙個週期所花費的時間(秒/毫秒)
animation-timing-function:動畫的速度曲線
(linear ease ease-in ease-out ease-in-out 貝塞爾曲線)
animation-delay:動畫何時開始·**
animation-fill-mode:動畫時間之外的狀態
規定動畫
@keyframes nameto}
13：transform-origin:基點定義y軸的寫法 :top / center / bottom / 20px /50 %
transform-origin : x y ;
14：等價寫法transform:translatez(800px) translatex(30px) translatey(30px);
transform:translatez(800px) translate(30px,30px);
15:景深perspective: 畫素px;
perspective 屬性定義 3d 元素檢視的距離，以畫素計。
當元素定義 perspective 屬性時，其子元素會獲得透視效果
perspective翻譯過來叫 景深
CSS3中各種定位屬性
定位 position static 預設值,設定座標無效 absolute 絕對定位 特徵 1 脫離文件流,不佔位置 2 預設參考html的00點 瀏覽器零點 3 如果有父級,且父級有定位,那就參考父級元素 預設定位除外 相當於給子元素指定了參考物 座標位置 水平 left right 垂直top...
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
CSS3新增屬性（3）
1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始，100 是動畫的完成，這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...