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

css新增的属性

一、颜色的表示方法：
1、十六进制 000 fff ff0000 00ff00 0000ff
2、英文单词
3、rgba(red(0-255),green(0-255),blue(0-255),alpha(0-1)
颜色的值越大，则越亮，透明的值越大，越不透明
4、hsla(色调（0-360）, 饱和度（0%-100%）, 亮度（0%-100%）, 透明度（0-1）)
background: rgba(255, 0, 0, 0.4);
background: hsla(200, 0%, 50%, 0);
opacity: 0;
二、transparent 控制透明度（这个可以实现三角形）
rgba() 来控制透明度
transparent 不可调节透明度，始终完全透明
opacity：数字 背景跟字体都会生效
div {
width: 0;
/* border-top: red solid 5px;
border-left: transparent solid 5px;
border-bottom: transparent solid 5px;
border-right: transparent solid 5px; /
border: 16px solid red;
border-color: transparent red transparent transparent;
}
三、盒子模型
box-sizing 表示你设置的宽高从什么位置去设置
1、border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding（怪异盒 子）
2、content-border：对象的实际宽度等于设置的width值和border、padding之和（正常盒子）
四、边框的属性
<1>边框圆角
border-radius:左上角 右上角 右下角 左下角
border-radius:属性值1（左上角，右下角） 属性值2（右上角 左下角）；
border-radius:属性值1（左上角） 属性值2（右上角，左下角） 属性3（右下角）
/ border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; /
/ border-radius：属性值1/属性值2 属性值1代表上下，属性值2代表左右*/
border-radius: 100px/80px;
半圆
div {
width: 300px;
height: 150px;
background: red;
border-radius: 150px 150px 0 0;
<2>边框阴影
box-shadow: 水平距离 垂直距离 模糊距离 阴影尺寸 颜色 inset（内阴影）;
box-shadow: -5px -5px 10px 3px #ccc, 5px 5px 10px 3px #ccc inset;
<3>边框图片
div {
width: 200px;
height: 200px;
border: 20px solid;（可加可不加颜色）
border-image-source: url(…/images/border.png);（边框图片路径）
/* border-image-slice: value; 没有单位的数值*/（图片边框向内偏移）
border-image-slice: 27;
/* border-image-repeat 是否平铺
取值：repeat 平铺不拉伸
round 平铺又拉伸
stretched 拉伸不平铺
*/
border-image-repeat: round;
}
五、文本属性
1）文本阴影text-shadow ： 2px（水平，可为负数） 3px（垂直，可为负数） 2px（模糊距离，不能为负数） red；
2）文本描边 -webkit-text-stroke：宽度 颜色；一定要加上-webkit-前缀
3）溢出省略 text-overflow：ellipse（省略号）；要和overflow：hidden；white-space：nowrap使用。
4）文本排版 dirction
ltr(left to right 从左到右)
rtl（right to left 从右到左），一定要配合 unicode-bidi: bidi-override; */
direction: rtl;
unicode-bidi: bidi-override;
六、背景属性(默认情况下，背景颜色是从padding开始排放)
1）background-origin:属性规定background-position属性相对于什么位置来定定位。（对背景图才有用） background-origin：content-box（从内容开始）/padding-box（从padding开始）/border-box（从边框开始）；
2）background-size：改变背景图片的大小
属性值有：auto（图片原来的值，默认值）/number（200px）可能让图片变形/percentage：value% value%（根据盒子的宽高来定）/cover（图片没有盒子大时，设置cover可使图片完全覆盖盒子，但是图片不能完全显示.一般配合background-position：center；去使用）/contain(包含，可能会出现空白区域)
3）backgroun-clip设置背景显示在哪些区域
取值：border-box：显示content，padding、border区域。
padding-box：显示在padding、content区域
content-box：显示在content区域
七、css3渐变（了解）
1）线性渐变（默认方向从上往下）
background：linear-gradient（direction，color1，color2，…）
direction取值:to left(从右往左) to right（从左到右） to top （从下往上）to bottom（从上往 下，默认值） to left bottom （左下角）to left top（左上角） to right top（右上角） to right bottom（右下角）
角度：单位为deg
当为0deg，得到一个从下往上。
90deg，得到一个从左往右
180deg，得到一个从上往下的渐变
-90deg，得到一个从右往左
2）径向渐变（一点向四周渐变）
background：-webkit-radial-gradient（center，shape，size，startcolor，…lastcolor）
center 渐变起点的位置，可以是百分比（注意要设两个值）
shape 渐变形状 ellipse表示椭圆（默认），circle表示圆形
size 渐变的大小，即到哪里为止。closest-side 最近边
farthest-side 最远边 closest-corner 最近角 farthest-corner最远角
3）重复渐变
background：repeating-linear-gradient（red，blue 20%，green 40%）
background：repeating-radial-gradient（red，blue 20%，green 40%）
八、自定义字体
引用
@font-face｛
font-family:“叶根”；
src:url(字体的路径)；
｝
相应的元素
div{
font-family:“叶根”；
｝
九、字体图标
引用
十、css过渡（重要）
transition:
取值：transition-property：all ，height ，width（检索或设置对象中参与过渡）
transition-duration：3s；快慢
transition-delay：1s；
transition-timing-function：
取值：ease；开始快，后面越来越慢。
ease-in；开始慢，后面越来越快
ease-out；减速运动
ease-in-out；先加速后减速
总写：transition: property duration delay timing-function;
transition: all 3s linear;