一、html5新特性 常用語義標簽:nav footer header section mark 功能標簽 video audio iframe canvas(畫布和繪圖功能) input新type:url/number/range/Date(date, month, week, time等)/se ...
一、html5新特性 常用語義標簽:nav footer header section mark 功能標簽 video audio iframe canvas(畫布和繪圖功能) input新type:url/number/range/Date(date, month, week, time等)/search/color 二、css3 1 邊框 border-radius:不同的賦值方法; box-shadow:10px 10px 5px red; border-image:賦值內容; border-image-source 用在邊框的圖片的路徑。 border-image-slice 圖片邊框向內偏移。 border-image-width 圖片邊框的寬度。 border-image-outset 邊框圖像區域超出邊框的量。 border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 備註:IE9+支持border-radius 和 box-shadow。 IE11, Firefox, Opera 15, Chrome 以及 Safari 6 支持border-image 屬性。 2 文本 text-shadow:5px 5px 5px yellow;(每個位置表示的含義) 3 字體 引入其他字體 @font-face的使用方法 @font-face{ font-family:"巴扎黑"; src: url(陳代明粉筆體演示版2.otf); } 4 動畫 transform:translate(px)/rotate(deg)/scale(2)/skew()/matrix() 備註:IE10、Firefox 以及 Opera 支持 transform 屬性 Chrome 和 Safari 需要首碼 -webkit- Internet Explorer 9 需要首碼 -ms- 5 動畫3D transform-origin 允許你改變被轉換元素的位置。賦值需要掌握 關鍵詞! transform-origin: x-axis y-axis z-axis; // x-axis 定義視圖被置於 X 軸的何處。可能的值： transform-style 規定被嵌套元素如何在 3D 空間中顯示!!! perspective 透視點 !!! backface-visibility 定義元素在不面對屏幕時是否可見 backface-visibility: hidden;
6 過度transition
備註:
IE10、Firefox、Chrome 以及 Opera 支持 transition 屬性。
Safari 需要首碼 -webkit-。
註釋：IE9 以及更早的版本，不支持 transition 屬性。
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。 不同的屬性值需要知道.
transition-delay 規定過渡效果何時開始。預設是 0。
7 幀動畫
eg: @keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
8 流式佈局 媒體查詢 響應式
流式佈局:百分比佈局, 所有尺寸參照父級 其中margin和padding特殊 參照寬度
媒體查詢 @media screen () and () 響應式: viewport 統一寫法 <!--移動端響應式的通用代碼！--> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
實例註意：
text-shadow
水平陰影、垂直陰影、模糊距離，以及陰影的顏色
text-shadow: 5px 5px 5px #FF0000;
box-shadow屬性適用於盒子陰影
box-shadow: h-shadow y-shadow blur spread color inset;
水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 從外層的陰影（開始時）改變陰影內側陰影
div{box-shadow: 10px 10px 5px #888888;}
transform-origin: x-axis y-axis z-axis; x-axis 定義視圖被置於 X 軸的何處。
多列
column-count:n;
column-gap:10px;間距
column-rule: 2px solid red; //相當於border 分隔線
resize: none|both|horizontal|vertical;
horizontal 用戶可調整元素的寬度。
vertical 用戶可調整元素的高度。
div{resize:both;
overflow:auto;
}
