HTML5
就是html粗合,只是升級了拉盾,多加了幾個標簽而已
選擇器
document.querySelectorAll()贺辰;
document.querySelector()恋追;
自定義屬性
data-xxx
dataset.xxx
class操作
classList 有l(wèi)ength value
操作:add() 添加
remove() 刪除
contains()包含
toggle() 切換
CSS3
就是比css2新增加了一些新的樣式
rgba()伴鳖;
border-radius 圓角
box-shadow 盒子陰影[inset] x偏移 y偏移 陰影范圍 [擴展] color
text-shadow 文字陰影[inset] x偏移 y偏移 陰影范圍 [擴展] color
陰影可以疊加
瀏覽器前綴
-webkit- Chrome/Safari/opear/firefox(49+)
-moz- Firefox
-ms- IE
-o- Opear(old)
不加前綴 W3C
運動
transition:速度(s) 要動的屬性 移動的方式
變形
transform:
translate(x婴削,y) 平移
rotate(deg) 旋轉(z軸)
scale(x倍,y倍) 縮放
skew (xdeg隙券,ydeg) 拉伸
設置原心位置
transfrom-origin 橫向
線性漸變
linear-gradient(color1男应,color2)
改變方向:linear-gradient(方向, color1, color2, color3...);
范圍漸變:linear-gradient(color1 start, color1 end, color2 start, color2 end, color3 start, color3 end...);
跳變:repeating-linear-gradient(color1 start, color1 end, color2 start, color2 end...);
徑向漸變
radial-gradient(color1, color2);
背景
background-size
文本切片
1.給元素設置漸變背景
2.設置文本切片:-webkit-background-clip: text;
3.文字透明