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)