選擇器
nth-of-type（n）：指定某個標簽菇绵，選取第幾個
nth-child（n） ：指定摸個標簽蜈块，選取標簽所在的位置
cursor：鼠標手性
：nth-child /：：selection ： 文本選中設(shè)置
背景
background-size: cover;? 不變形串稀，占滿盒子泥栖，可能被裁剪
background-size: contain;? 不變形区转，不一定占滿盒子函似，不會被裁剪
background-clip:? 背景裁切：背景顏色（border，padding店乐，margin）
background-origin：? 背景圖片默認顯示位置
border-image ：背景圖片路徑
box-shadow? 設(shè)置元素陰影? box-shadow: h-shadow（水平陰影的位置） v-shadow（垂直陰影的位置） blur（模糊距離） spread（陰影的大屑杼伞） color;
文本
文本換行 ：
word-break：break-all
word-wrap：break-word
溢出文本處理
單行文本：
white-space:nowrap? 限制換行
overflow：hidden? 盒子溢出隱藏
text-overflow: ellipsis; 文本超出省略號
多行文本
-webkit-line-clamp:2;（行數(shù)）display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;
缺一不可
主流瀏覽器(內(nèi)核)
Chrome(webkit/blink)? ? -webritl
IE(trident)? -ms-
Firefox(gecko)? -moz-
Safari(webkit)? ? -webkit-
Opera(persto)? ? -o-
漸變（background-image）
線性漸變 ：linear-gradient（）
徑向漸變 ：radial-gradient（）
錐形漸變 ：conic-gradient（）
濾鏡（filter）
亮度brightness(.5)
對比度contrast(2)
透明度opacity(.5)
灰度:grayscale(100%)
模糊blur(3px)
褐色filter:sepia(1)
飽和度saturate(2)
色相旋轉(zhuǎn)hue-rotate(9odeg)
反色ilter:invert(1)
陰影 drop-shadow(5px 5px 5px #000）
服務器字體
@font-face{? ? font-family：‘自己定義一個名字’? ? src：url（‘? ? ’）//字體路徑}
css3動畫樣式
iconfont
gzip（gz）：壓縮優(yōu)化
動效（transition）
transition-property: all;? 執(zhí)行過渡過渡屬性:all
transition-duration:1500ms;? 持續(xù)時間:s,ms
transition-timing-function:ease;? 時間函數(shù)（速度曲線）:關(guān)鍵字，貝塞爾曲線眨八，階躍 函數(shù)
ease-in：先慢后快
linear：勻速
transition-delay： ns/ms? 延遲
變換（transform）
transform: translate(0,0);? ? ：平移
transform:rotate(45deg);? ? ? ：旋轉(zhuǎn)
rotateX
rotateY
rotateZ
transform: scale(1）? ? ：放大
transform: skew ( 45deg);? ? ：傾斜
行類元素不可用
/設(shè)置變換基準點:旋轉(zhuǎn)腺兴，縮放/transform-origin: left top;
/啟動瀏覽器的3D渲染/transform-style: preserve-3d;
動畫
@keyframes
聲明動畫
/奇數(shù)反向，偶數(shù)反向正向執(zhí)行/animation-direction: alternate-reverse;
animation-direction: alternate;/奇數(shù)正向廉侧，偶數(shù)反向執(zhí)行/
/┌動畫結(jié)束后停留狀態(tài)：forwards（停留在動畫結(jié)束位置/animation-fill-mode:forwardsl:
animation-play-state: running;
繼續(xù)執(zhí)行
animation-play-state:paused;
暫停
