概要：CSS3美化樣式、自定義字體圖標、濾鏡設置、CSS3選擇器、transform2D轉換、新增表單控件、vaild表單驗證、表單樣式美化等。
屬性選擇器：
E[attr]只使用屬性名，但沒有確定任何屬性值
E[attr="value"]指定屬性名，並指定了該屬性的屬性值
E[attr~="value"]指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫
E[attr^="value"]指定了屬性名，並且有屬性值，屬性值是以value開頭的
E[attr$="value"]指定了屬性名，並且有屬性值，而且屬性值是以value結束的
E[attr*="value"]指定了屬性名，並且有屬性值，而且屬值中包含了value
E[attr|="value"]指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）
自定義字體：
格式：
@font-face { font-family: 'miaov'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
轉換字體格式生生成兼容代碼：https://www.fontsquirrel.com/tools/webfont-generator
濾鏡：
0 ~ 1
0% ~ 100%
灰度 -webkit-filter:grayscale(1);
棕色調 -webkit-filter:sepia(1);
飽和度 -webkit-filter:saturate(0.5);
色相旋轉 -webkit-filter:hue-rotate(90deg);
反色 -webkit-filter:invert(1);
透明度 -webkit-filter:opacity(0.2);
亮度 -webkit-filter:brightness(0.5);
對比度 -webkit-filter:contrast(2);
模糊 -webkit-filter:blur(3px);
陰影 -webkit-filter:drop-shadow(5px 5px 5px #ccc);
注意：需要加前綴才能生效。
H5新增表單元素：
表單控件：
<form action="">
<input type="email" />
<input type="submit" />
</form>
email : 電子郵箱文本框，跟普通的沒什么區別
當輸入不是郵箱的時候，驗證通不過
移動端的鍵盤會有變化
tel : 電話號碼
url : 網頁的URL
search : 搜索引擎
chrome下輸入文字后，會多出一個關閉的X
range : 特定范圍內的數值選擇器
min、max、step( 步數 )
number : 只能包含數字的輸入框
color : 顏色選擇器
datetime-local : 顯示完整日期，不含時區
time : 顯示時間，不含時區
date : 顯示日期
week : 顯示周
month : 顯示月
表單的特性和函數：
placeholder : 輸入框提示信息
autocomplete : 是否保存用戶輸入值
默認為on，關閉提示選擇off
autofocus : 指定表單獲取輸入焦點
list和datalist : 為輸入框構造一個選擇列表
list值為datalist標簽的id
required : 此項必填，不能為空
Pattern : 正則驗證 pattern="\d{1,5}“
Formaction 在submit里定義提交地址
表單選擇器：
E:target 表示當前的URL片段的元素類型，這個元素必須是E，例子：實現tab切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tab-control a{
display: inline-block;
text-decoration: none;
color: #fff;
height: 20px;
width: 40px;
text-align: center;
line-height: 20px;
background-color: pink;
}
.tabs{
border: 1px solid red;
height: 200px;
width: 200px;
/*overflow: hidden;*/
overflow: auto;
}
.tabs div{
width: 100%;
height: 100%;
}
:target{
display: block;
}
</style>
<!--
E:target 表示當前的URL片段的元素類型，這個元素必須是E
-->
</head>
<body>
<div class="tab-control">
<a href="#tab1">tab1</a>
<a href="#tab2">tab2</a>
<a href="#tab3">tab3</a>
</div>
<div class="tabs">
<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="tab3">tab3</div>
</div>
</body>
</html>
E:disabled 表示不可點擊的表單控件
E:enabled 表示可點擊的表單控件
E:checked 表示已選中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一個字符
E::selection表示E元素在用戶選中文字時
E::before 生成內容在E元素前
旋轉：
transform
rotate(90deg) 旋轉函數 取值度數
deg 度數
transform-origin:x y 旋轉的基點
傾斜：
skew(90deg) 傾斜函數 取值度數
skewX()
skewY()
縮放：
scale(2) 縮放函數 取值 正數、負數和小數
scaleX()
scaleY()
位移：
translate() 位移函數
translateX()
translateY()
矩陣：
matrix(a,b,c,d,e,f) 矩陣函數
通過矩陣實現縮放
x軸縮放 a=x*a c=x*c e=x*e;
y軸縮放 b=y*b d=y*d f=y*f;
通過矩陣實現位移
x軸位移: e=e+x
y軸位移: f=f+y
通過矩陣實現傾斜
x軸傾斜: c=Math.tan(xDeg/180*Math.PI)
y軸傾斜: b=Math.tan(yDeg/180*Math.PI)
通過矩陣實現旋轉
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
變換兼容IE9以下IE版本只能通過矩陣來實現
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩陣沒有E和F兩個參數 M11==a; M12==c; M21==b; M22==d
矩陣使用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
transition: 3s;
margin: 100px auto;
}
</style>
<script>
window.onload = function() {
var box = document.getElementById("box");
box.onclick = function() {
var a = 1,
b = 0,
c = 0,
d = 1,
e = 0,
f = 0;
var deg = 60;
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
box.style.transform = "matrix("+a+","+b+","+c+","+d+","+e+","+f+")"
box.style.filter = "progid:DXImageTransform.Microsoft.Matrix( M11= "+a+", M12= "+c+", M21= "+b+" , M22= "+d+",SizingMethod='auto expand')";
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>