相關輔助網(wǎng)站：
1.查詢 CSS3 兼容性的網(wǎng)站
2.谷歌瀏覽器媒體參與度查詢
3.阿里字體庫定制網(wǎng)站：iconfont-webfont平臺
4.阿里圖標
5.貝塞爾曲線制作庫

HTML5標簽

• 文本標簽
  
  文本標簽.png
• 表單標簽
  
  表單標簽.png

表單控件屬性.png

input屬性.png

視頻標簽.png

音頻標簽.png

• H5新屬性
  
  全局屬性.png

適配ie8等舊版ie瀏覽器效果可以引入谷歌出的兼容性js文件

image.png

兼容性.png

CSS3特性

概述.png

私有前綴1.png

私有前綴2.png

長度單位.png

不透明度.png

• 文本屬性
  
  文字陰影.png

文字描邊.png

• 文本內容換行等
  
  文本換行.png

overflow-wrap 應用于行級元素懂算，用來設置在一個本來不能斷開的字符串中插入換行符穷蛹，以防止文本溢出七婴。
添加此規(guī)則使得長單詞或連續(xù)字符能在容器內換行，word-wrap與overflow-wrap都可以達到同樣的效果。
屬性：
normal：行只能在正常的單詞斷點（例如兩個單詞之間的空格）處換行。
anywhere：為防止溢出腾供，如果行中沒有其他可接受的斷點，則不可斷的字符串（如長詞或 URL）可能會在任何時候換行鲜滩。在斷點處不會插入連字符伴鳖。在計算最小內容內在大小時，會考慮由單詞換行引入的軟換行機會徙硅。
break-word：與 anywhere 值相同榜聂，如果行中沒有其他可接受的斷點，則允許在任意點將通常不可斷的單詞換行嗓蘑，但在計算最小內容內在大小時不考慮斷字引入的軟換行機會须肆。

文本換行2.png

-----文本溢出處理：
overflow: hidden;//超出不顯示
white-space:nowrap;//換行
text-overflow:ellipsis;//顯示...省略號

-----文本換行處理：
 /* overflow-wrap用來設置一個本來不能斷開的字符串中插入換行符， word-wrap與overflow-wrap都可以達到同樣的效果 */
      overflow-wrap: break-word;
 /*word-break 指定了怎樣在單詞內斷行脐往。對于中文或英文單詞休吠，可以使用此規(guī)則來強制換行 */
      word-break: break-all;
/* white-space 保留空白符序列，進行換行业簿。屬性用于設置如何處理元素內的空白字符瘤礁。確保換行也能在JSON數(shù)據(jù)中的任何位置發(fā)生  */
      white-space: pre-wrap;

文本溢出.png

文本修飾.png

• 字體
  

  字體.png

• 背景
  

  origin.png

clip.png

size.png

多背景圖組合.png

線性漸變;
background-image:linear-gradient(red,yellow,green);//漸變顏色
background-image: linear-gradient(to right top,red,yellow,green); //漸變方向
background-image: linear-gradient(30deg,red,yellow,green);//通過角度設置漸變方向
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);//設置漸變位置
background-image:radial-gradient(□red,yellow,□green);//徑向漸變radial-gradient

線性漸變.png

徑向漸變.png

徑向漸變1.png

徑向漸變2.png

徑向漸變-小球.png

• 邊框
  
  邊框輪廓.png

content-box:整個大小是本身寬高+padding+border，會往外擴張梅尤。
border-box:固定了整個盒子寬高柜思，多加的padding、border等是往里面縮巷燥。

怪異盒模型.png

盒子陰影1.png

盒子陰影2.png

2D變換

平移赡盘，旋轉，縮放等缰揪。
注意：行內元素不能使用transform變換陨享，瀏覽器會自動忽略改屬性。

translate.png

縮放.png

旋轉.png

扭曲.png

扭曲2.png

混合變換.png

3D變換

景深.png

透視點.png

3D位移.png

旋轉.png

動畫

• 過渡動畫transition：配合2D钝腺、3D變換transform可以自定義實現(xiàn)不同的特效樣式抛姑。

• transition如果配合偽類鼠標操作，應該先在默認樣式里面配置好transition艳狐，再在偽類里設置元素變換transform定硝。
  如：先設置#userinfoImg {transition: all 0.5s}，后#userinfoImg :hover{scale(0.8) rotate(45deg);}毫目，如此當鼠標移除后蔬啡，屬性瞬間去除诲侮，才不會有頓挫感。

  
  
  過渡.png
  
  
  過渡.gif
  
  
  過渡類型.png
  
  
  過渡復合屬性.png
  
  
  過渡類型展示.gif
• 動畫animation
  
  簡單使用1.png
  
  
  簡單使用2.png
  
  
  其他動畫屬性1.png
  
  
  其他動畫屬性2.png
  
  
  動畫animation.gif

多列布局

column-span：設置某一個子元素是否跨列箱蟆，如頂部文章標題沟绪。
注意：一般要設置每一個子容器 width:100%，即和分配的每一列一樣寬顽腾，不超出近零。

image.png

image.png

元素隱藏：
display: none;//不占位
visibility: hidden;//占位