h5属性整理

1.icon可以用before等伪元素；还有遮罩背景图。定位，图形拼接等等；插入图片
2.nth-child(2n)所有偶数，2n-1所有奇数；
3.div:first-line（）第一行的样式；父元素下第一子元素；
4.:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择
5.only-child（）选择父元素中唯一的子元素，
6.first-of-type(),选择同类型的第一个同级兄弟元素；
7. p:not(.first) 选取某个元素之外的所有元素；很有用；
8. :target h3{
color:red;
}这个一般结合锚点使用；
9. ：focue{ color:red} 当输入框聚焦是，文字变红；
10. p::selection{ background:red;color:blue }选中时，文字背景变红色，字变蓝色
注意：单冒号是伪类，双冒号的是伪元素；

css3的文本属性；
1.阴影
text-shadow：x阴影 y阴影 模糊半径 阴影颜色；text-shadow可以接收多个阴影效果值；可以制作凸出的字，设置上与左为白色即可，下与右是凹陷的字效果；
2.text-stroke文字描边；
text-stroke:1px red;文字被描一像素的红边；
3.text-overflow:ellipsis(省略号显示)/clip（直接裁掉）;
4.white-space:nowrap;强制文本在一行内显示；
5.word-wrap:break-word;强制换行；
6.css3的RGBA颜色
rgba中：r是红色值，g是绿色值，b是蓝色值（rgb正常取值是0-255）a是透明度；
7.css渐变类型；
css3渐变共两种：线性渐变与径向渐变
①线性渐变，指在一条直线上进行渐变，在网页中大多数是线性渐变；
background：linear-gradient（方向，开始颜色，结束颜色）
线性渐变的方向也可以是角度（90deg）规定颜色占的尺寸（red 100px,blue 100px）
重复渐变background:repeating-linear-gradient(red 100px,yellow 200px);

②径向间，是从起点到终点颜色从内到外圆形渐变（从中间向外360扩散）；
background: radial-gradient(方向 圆形或者椭圆 半径, start-color, last-color);

js添加的东西

1.classNameList.add/remove/toggle(切换); 添加新的class或者删除；
2.forEach(function( element,index){ 执行函数 })
element是循环的每一个元素，index是下标；index包一层函数还是可以用的；
3. JSON.parse(json );将json转换成字符串对象；
JSON.stringify( str);将字符串转换成json对象；
4.自定义属性
obj.dataset.attr = value -> 赋值
obj.dataset.attr -> 取用
5,。属性选择器；
[attr=value] 属性选择 属性attr的值以val开头的；
[attr$=value] 结尾匹配 以value 结尾的
[attr|=valur] 匹配以横线连接的单词，首个单词为value的；
[attr~=value] 匹配空格隔开的单词，只要有value 就被选中；
[attr*=value] 只要包含value的字符串就可以；

6.box-shadow:x位移 y位移 模糊半径 弥散半径 阴影颜色；第四个值可以省略；inset加上这个属性阴影向内展现；
7.border-radius:上 右 下 左；四个角的值；也可以跟%值像素值；四个角360是一个圆；radius也支持单独一个角设置圆角；比如 border-top-left-radius:90px;注意在写方向的时候上下写在前面，top和bottom要在前面否则没有效果；
8. js方法获设置属性的，
①ali.setAttribute('index',i)属性名，属性值；获取直接是getAttribute(属性名)即可
②aLi[i].dataset.index = i; index是属性名。访问的时 this.dataset.属性名即可；
9,。设置背景图
background-attachment:fixed; 背景图不随内容滚动；
height:400px; 背景图显示大小；
background-size:cover; 背景图是否平铺；设置背景图片大小
background-image:url(),url(),后面可以链接多个背景图片；在url地址前开始设定方向（top right,bottom left）等注意也是上下写在左右前面；
background-image:linear-gradient(red,rgba(100,10,50,0)) 背景图也可以渐变；
background-origin:背景图片从什么位置平铺；
border-box;边框开始；
content-box从内容开始；
padding-box从内边据开始（默认）、
background-clip背景图片剪切。接受值与origin一样；

 

10.mask
11.本地存储；

12.resize允许更改指定元素的大小；
resize:both可调整元素的高度和宽度；
resize:horizontal调整元素的宽度；
resize:vertical调整元素的高度；
搭配 overflow:auto;这个属性使用
13.text-overflow：ellipsis;超出显示省略号；需要搭配overflow：hidden；White-space；一起使用；

14。transform动画过度；后面接收四个值；name持续时间，运动函数，延迟时间；
name运动函数延迟时间可以省略；

15.倒影 box-reflect：倒影方向，间隔，渐变颜色； 还可以跟url()....背景图；
倒影方向由四个值：
left，right，above，below；
16;要想循环过后使用i可以用es6进行解析使用i或者index；
17，滤镜filter:blur(模糊大小)
filter:drop-shadow(12px 12px 1px red)阴影；
filter: brightness(2)亮度；
filter: saturate(10)饱和度；
18.animation动画；
①设置动画；
animation-name动画名字；
animation-duration1s;动画持续时间；
animation-fill-mode:forwards;动画播放完毕后，是否使用最后的样式；
animation-timing-function：动画播放模式；加速还是匀速；
animation-iteration-count ：动画播放次数；来回算两次播放量；
animation-direction：alternate；是否反向播放；意思就是在播放到达指定位置的时候；是否从指定位置再次播放到之前；
animation-play-state：paused暂停、running继续播放；是否播放时暂停
②引用动画
@keyframes 动画名{
form{
transform: translate(10px,20px) ;初始位置
}
to{
transform: translate(100px,200px) ;终点位置
}
}

19.transform：变形
1.translate（）位移，数值px;
2.skew（）倾斜接收角度值deg；x轴y轴倾斜相同角度一个正数一个负数，出现旋转的效果；内容相反方向旋转；显示不动；
3.rotate( )旋转，接收角度值；
4.scale（)缩放，接收的是倍数数值；-1倍相当于沿x轴旋转180度；
复合动画； rotate( ),translate( );skew(45deg,-45deg ),scake( 2)搭配使用；
20：开启3d视角；
transform-style:preserve-3d;
perspective:800px;
21

backface-visibility: hidden;