設置背景圖片大小
background-size: length|percentage|cover|contain;
length 設置背景圖像的高度和寬度。
percentage 以父元素的百分比來設置背景圖像的寬度和高度。
cover 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。
contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。
背景被裁剪區域
background-clip:
border-box 背景被裁剪到邊框盒
padding-box 背景被裁剪到內邊距框
content-box 背景被裁剪到內容框
text 背景被裁剪到文本樣式
背景圖片的定位起點
background-origin
content-box 背景圖片相對于內容定位
padding-box 背景圖片相對于內邊距定位
border-box 背景圖片相對于邊框定位
多背景
background:url(路徑),url(路徑),url(路徑)
線性漸變
background:-webkit-linear-gradient(deg,red 25%,green 25%);
顏色 位置
deg多少度 也可以不寫
徑向漸變
background: -webkit-radial-gradient(circle,yellow 50px,red 50px);
顏色 位置
ellipse(橢圓)
circle(圓形)
重復線性漸變
background:-webkit-repeating-linear-gradient(-45deg,red 0px,red 10px,green 10px,green 20px);
顏色
transparent 透明
邊框如何設置圓形
border-radius：50% 圓形
偽類選擇器
nth-child()
nth-of-type()
帶透明的顏色
rgba(0,0,0,0) 最后一個為透明度 0-1
新事件
ontimeupdate 當前位置發生改變時
onended 當播放結束時
設置倒影
-webkit-box-reflect: below 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
方向 距離 可加樣式
below下面 above上面 left左邊 right右邊
動畫效果
定義動畫
@keyframes 動畫名{
0%/from{
}
100%/to{
}
}
動畫的調用
animation: 8s test linear infinite;
時間 動畫名 運動樣式 無限次
濾鏡
-webkit-filter: blur(20px);
數值越大越模糊
蒙版(遮罩層)
-webkit-mask:url("2.png") no-repeat; 引一個png圖片
-webkit-mask-position: 300px 300px; 給png圖片定位
背景陰影
box-shadow:10px 10px 10px #000;
box-shadow:x y blur #000; blur：模糊程度 數值越大越模糊
如何測試性能:
console.time(''); 參數名需要一致,必須要傳參數
console.timeEnd(''); 參數名需要一致,必須要傳參數
h5自定義屬性：
setAttribute
getAttribute
data-前綴+屬性名 瀏覽器不會過濾
dataset是一個json（推薦用這個）
dataset獲取所有data-屬性
