h5新增标签及css3新增属性

新增标签

video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header

新增属性

圆角
阴影
渐变 圆形渐变 线性渐变 跳变 重复渐变
蒙版
倒影
滤镜
多背景
文字方向
文字缩略

过渡transition
变换transform
动画animation:
keyframes

一个一个来：
1》圆角：
border-radius:px %;

border-radius: 一个值; 四个角
border-radius: 左上右下 右上左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上 右上 右下 左下;
2》阴影：
box-shadow:x y blur color;

box-shadow:[inset] x y blur [范围] color;
ext-shadow:x y blur color;

阴影可以叠加
box-shadow:x y b c,x y b c,x y b c……;

文字阴影
text-shadow:x y blur color;
3》渐变：
线性渐变：-webkit-linear-gradient(渐变角度/渐变开始的位置，red 颜色开始渐变的位置，green 颜色开始渐变的位置);
径向渐变：-webkit-radial-gradient(圆心位置，形状颜色,red 渐变的开始位置,blue 渐变的开始位置);

重复渐变-webkit-repeating-linear/gradial-gradient(渐变角度/渐变开始的位置，写一个循环的渐变);

跳变（四个颜色的跳变）：
background:-webkit-linear-gradient(red 25%,green 25%,green 50%,yellow 50%,yellow 75%,deepskyblue 75%);
4》蒙版：
-webkit-mask:url(‘图片路径’);
-webkit-mask:linear-garadient();

-webkit-mask-position:x y;

background-size:contain;–>高度顶满，宽度自适应 cover—》宽度撑满，高度自适应
5》倒影：
-webkit-box-reflect:below 20px -webkit-linear-gradient(rgba(0,0,0,0,),rgba(0,0,0,1));
方向 和倒影之间的距离

倒影方向above（向上） below（向下） left（向左） right（向右）
6》滤镜（只列举了两个，高斯模糊还算重要）：
高斯模糊
-webkit-filter:blur(20px); 括号内是模糊程度

褐色处理
-webkit-filter:sepia();
7》多背景
backgoround:背景1，背景2，背景3..;（不兼容）
8》文字方向
direction:ltr;
unicode-bidi:bidi-override; ——》两个必须配合使用

方向 ltr ：left to right rtl：right to left（默认字体在屏幕右面）
9》文字缩略

text-overfow:ellipsis; —->参数还可以是clip
wite-space:nowarp;
overflow:hidden;

一、过渡transition
transition:4s all ease/linear;
时间 过渡的属性 运动方式
二：变换transform
主要常用的有四个属性 rotate translate scale skew

1》角度rotate(x,y) 正号表示顺时针
rotateX 会变矮
rotateY 会变窄
rotateZ 没变化 ———》使用z轴时给父级添加transform-style:preserve-3d;

rotateX和rotateY使用时候变矮变窄是因为没有视觉的景深，所以需要添加景深

景深：transform:perspective(800-2000px);
2》位移translate(x,y) –>移动的是距离并不是坐标
translateX translateY
北面不可见：backface-visibility:hidden;
3》缩放scale(x,y)
x，y表示x轴，y轴方向，只写一个的话默认x，y都缩放
如果值是-1的话表示在此轴方向反向
4》扭曲skew(x,y)