h5

controls---控制台---用在video audio

canvas----画图-js来配合操作

H5新标签-header，footer，nav，sction，arcticle--语义化

border-radius:50%;----圆角属性

transition:0.3s all ease;---过度-简易动画-时间-全部-动作形式

浏览器内核前缀：有一些兼容高版本的可以不加，有一些就算是高版本，也得加上。

-webkit-，-moz-(火狐),-ms-(IE),-o-(O朋)

定义一个动画：

@-webkit-keyframes tab{

form{

width:200px; height:200px; background:red;

}

to{

background:blue; border-radius:50%;

}

}

keyframes(关键帧；关键影格；键架);

调用一个动画

-webkit-animation:tab 2s infinite;

/infinite-(无限循环)linear-(匀速)ease-in-out-(先快后慢)/

背景透明： background:rgba(255,0,0,0.5-(透明选项));

盒子阴影 : box-shadow:5px 5px 5px 5px #000;

1.x轴偏移量(值大往右)；

2.y轴偏移量(值大往下)；

3.模糊度(值越大越模糊)；

4.阴影大小(值越大阴影越大);

5.颜色

盒子内阴影:inset;

------box-shodow:inset 5px 5px 5px 5px #000;

文字阴影：text-shadow:5px 5px 5px #000;

1.x轴偏移量(值大往右)；

2.y轴偏移量(值大往下)；

3.模糊度(值越大越模糊)；

4..颜色

背景色渐变:

线性渐变：background:-webkit-linear-gradint(方向,red,yellow,red)

方向：

1.left top

2.left

3.top

4.right

5.bottom

6.45deg--45度(可以是负的)

渐变区域:

background:-webkit-linear-gradient(red 100px,blue);--前面的 red 占100px，100px往上才开始渐变

区域值：px %

背景色多个渐变:

background:linear-gradient(45deg,red 25%,blue 25%,blue 50%,yellow 50%,yellow 75%,green 75%);

gradient(倾斜度)；linear(线性，直线)；

径向渐变:

background:radial-gradient(颜色1,颜色2...);

径向形状:

background:radial-gradient(形状,red,blue);

形状：

1.椭圆---ellipse

2.圆----circle

3.background:radial-gradient(x y,red,blue);

x轴椭圆度

y轴椭圆度

区域大小：

background:radial-gradient(circle,red 50%,blue 50%);

圆心位置：

background:-webkit-radial-gradient(位置,circle,red,blue);