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);

                     位置：
            1.left top
            2.left
            3.top
            4.right
            5.bottom
            6.center

            7.background:-webkit-radial-gradient(x y,100px 50px,red,blue);
            x轴移动的位置
            y轴移动的位置

注意：background:-webkit-radial-gradient(100px 50px,red,blue)
里面的俩个数写了前缀的时候默认是位置！
不写是椭圆度！

重复渐变：
-webkit-repeating-linear-gradient(red 0px,blue 10px);

    -webkit-repeating-linear-gradient(45deg,red 0px,red 10px,blue 10px,blue 20px);

蒙版:
类似背景图
-webkit-mask:url(mb1.png) no-repeat 0 0;
background：url，url，url;
背景尺寸:
background-size:值;
background-size:contain;(以高度为准不变形)
background-size:cover;(以宽度为标准不变形)
background-size:100%;

   背景图生效的情况：

    div.box{ background-origin:border-box;}
    div.box2{ background-origin:padding-box;}
    div.box3{ background-origin:content-box;}   

背景图从哪里开切：
    div.box{ background-clip:border-box;}
    div.box2{ background-clip:padding-box;}
    div.box3{ background-clip:content-box;}


文本开切：
    -webkit-background-clip:text; 
    color:rgba(0,0,0,0)

倒影:-webkit-box-reflect: 方向 距离 渐变；
方向:
-1.below---向下
-2.above---向上
-3.left-------左边
-4.right-----右边
reflect（ 反映；反射，照出；表达；显示;反省）

滤镜：
filter：blur（10px）；----模糊度！
invert----反色
grayscale---灰色

缩放：
textarea ------resize:none;
resize:none;
both/horizontal/vertical/none

选择器：
document.querySelectorAll('.red')---获取一组元素
document.querySelector('#box');----获取一个

      data:自定义属性；
                               obj.dataset.xxx------设置自定义属性
      有利于遍历循环！ data-aa='123'

选项卡：
aBtn[i].index=i;----this.index

aBtn[i].dataset.index=i;--this.dataset.index

class操作！

aDiv[i].classList
    .add('active'); 添加
    .remove('active'); 删除
    .contains('active');可以判断标签上是否有这个class
    .toggle('active');切换class，反选

css3选择器：
属性选择器：
input[name=value]{}
[name]{}
div[name=value]---只要包含这个value都可以选中
div[name^=value]---
以value这个词开头的
div[name$=value]---
以value这个词结尾的
div[name|= value]
整个是一个value，或者是以value开头（value-abc）
div[abc][title]
只要满足这上写的属性就可以
div[abc],[title]
只要有上的abc，title都可以选中

结构性伪类选择器：
li:nth-child(1) ---在css中从1开始计算
li:nth-child(n) 第n个
li:nth-child(2n) 偶数
li:nth-child(even)
li:nth-child(2n-1) 奇数
li:nth-child(odd)
li:nth-last-child(1) 倒数第一个
li:nth-child(3n)---以3的倍数，一个一个变红！
li:first-child 第一个
li:last-child 最后一个

*:nth-child(1)---所有标签里面子级的第一个！！！
body *:nth-of-type(1)--所有标签同类型里面的第一个元素
body *:nth-last-of-type(1)
所有标签同类型里面的倒数第一个元素

li:empty 选中空元素的！
input:disabled{选中不可用的元素
border:2px solid red;
}
input:enabled{选中可用元素
border:2px solid blue;
}
input:checked{选中就变大
width:80px;
height:80px;
}

box~p #box同级后面的元素p

box>p #box离它最近子级p

h1:not(.red){ 选中不包含.red的元素
background:red;
}
p:first-line{//一段文字里面的第一行！
background:red;
color:#fff;
}
p:first-letter{//一段文字里面第一个字
background:red;
color:#fff;
font-size:30px;
}
p::selection{//p选中文本的颜色和字颜色
background:green;
color:yellow;
}
::selection{全部选中文本的颜色和字颜色
background:green;
color:yellow;
}
p:after{文本后面添加内容
content:'你好，下来吃饭';
color:red;
}

旋转：
transform:rotate(30deg);
-webkit-
-moz-
-ms-
-o-

动画：
transition:时间 all ease；
----上下滑动幻灯片！

transform：rotate（45deg）；
旋转45deg；
transform--------变形
transform:translate(100px,200px)--平移
translate(x,y)
x正数向右
y正数向下
transform:scale(x,y)-------缩放比例

transform:skew(0deg,45deg)---倾斜度

好处：
物体本身没有发生变化，盒子模型没有改变，不会不会引起浏览器重绘，---性能高！
只是视觉上的变化！
注意：span a 这些行内元素识别这些样式！必须的转换：块，行内快！
简写：transform:多个值

以........为中心点
transform-origin:x,y;------x与y轴焦点就是中心点；
文字阴影:
text-shadow:1px 1px 1px red;---x y 模糊度 颜色
叠加效果:

                text-shadow:100px 2px 4px red,110px 4px 8px blue,120px 8px 16px green;          

文本描边：
-webkit-text-stroke:2px #fff;

文字模糊：

color:rgba(0,0,0,0);
text-shadow:0 0 100px #fff;
块阴影--内
text-shadow:1px 1px 1px 1px red
x y 模糊度 大小 颜色
text-shadow:inset 1px 1px 1px 1px red
内 x y 模糊度 大小 颜色
box-shadow:5px 0 2px red,0 2px 2px green;