杂章笔记

className的操作
+ obj.classList class列表对象
- add(); 添加
- contains（）检测是否包含某个class
- length 长度
- remove（）删除
- toggle（）切换
** 自定义属性**

   data-xxxx            向后兼容
   dataset            自定义属性的集合

** CSS3的选择器**

属性选择器

  ■ E[index]          有index属性的
  ■ E[index=a]      index属性值就是a
  ■ E[index~=a]        index属性只要包含a
  ■ E[index^=a]        index属性以a开头
  ■ E[index$=a]        index属性以a结尾
  ■ E[index|=a]        index属性就是a或者以a-开头```
>   
伪类选择器

■ E:nth-child(位置){}
■ E:nth-child(odd) 奇数行
■ E:nth-child(even) 偶数行```

文本选择器

 ■ E:first-line             第一行
 ■ E:first-letter           第一个字
 ■ E::selection             选中文字
 ■ E::before            前面
 ■ E::after                 后面```

              
  浏览器前缀集合
>

-webkit-transition Chrome、Safari、Opera
-moz-transition Firefox
-ms-transition IE
-o-transition Opera
transition 不加前缀```
js写法

-webkit-transition      WebkitTransition
-moz-transition           MozTransition
-ms-transition          msTransition
-o-transition           OTransition
transition              transition```

 **圆角**

border-radius:px %;
border-radius: 一个值;     四个角
border-radius: 左上右下 右上左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上 右上 右下 左下;```

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

阴影可以叠加
box-shadow:x y b c,x y b c,x y b c......;
文字阴影
text-shadow:x y blur color;

关于距离

ev.clientX+scrollLeft           ev.pageX
ev.clientY+scrollTop             ev.pageY```
** 渐变**  
>线性渐变

c =color; s=start e=end;
-webkit-linear-gradient(c,c....);
-webkit-linear-gradient(方向,c,c....);
-webkit-linear-gradient(角度,c,c....);
-webkit-linear-gradient(colo start,colo end,c s,c e....);
-webkit-repeating-linear-gradient();```

推荐阅读更多精彩内容