一、CSS3 box-shadow 和 text-shadow 属性：
1.1 box-shadow语法：
box-shadow: h-offset v-offset blur-radius spread-radius color inset;
对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 [投影方式]}
默认值是none
1. h-offset：必需。水平阴影的位置。允许负值。如果值为0，则对象的左右边都有阴影，如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边(默认是outset，如果是inset相反)；
2. v-offset：必需。垂直阴影的位置。允许负值。如果值为0，则对象的底部和顶部都有阴影，如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部(默认是outset，如果是inset相反)；
3. blur-radius：此参数可选，但其值只能是正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
4. spread-radius：可选。其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
5. color：可选。阴影的颜色；
6. inset：可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
注意：box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
1.2 text-shadow语法：
text-shadow 属性向文本设置阴影。默认值是none
text-shadow: h-shadow v-shadow blur color;
1. h-shadow必需。水平阴影的位置。允许负值。
2. v-shadow必需。垂直阴影的位置。允许负值。
3. blur可选。模糊的距离。
4. color可选。阴影的颜色。
二、CSS3 transition 属性
2.1 定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：默认值是all 0 ease 0
transition-property
transition-duration
transition-timing-function
transition-delay
注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
2.2 语法
transition: property duration timing-function delay;
transition-property 规定设置过渡效果的 CSS 属性的名称。
-one 没有属性会获得过渡效果。
-all 所有属性都将获得过渡效果。
-property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
-time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
transition-timing-function 规定速度效果的速度曲线。
-linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
-ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
-ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
-ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
-cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 定义过渡效果何时开始。
参考CSS详解
三、CSS3 transform 属性
3.1 定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜：默认值是none
-none 定义不进行转换。
-matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
-translate(x,y) 定义 2D 转换。
-translate3d(x,y,z) 定义 3D 转换。
-translateX(x) 定义转换，只是用 X 轴的值。
-translateY(y) 定义转换，只是用 Y 轴的值。
-translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
-scale(x,y) 定义 2D 缩放转换。
-scale3d(x,y,z) 定义 3D 缩放转换。
-scaleX(x) 通过设置 X 轴的值来定义缩放转换。
-scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
-scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
-rotate(angle) 定义 2D 旋转，在参数中规定角度。
-rotate3d(x,y,z,angle) 定义 3D 旋转。
-rotateX(angle) 定义沿着 X 轴的 3D 旋转。
-rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
-rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
-skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
-skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
-skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
-perspective(n) 为 3D 转换元素定义透视视图。
3.2 语法
transform: none|transform-functions;
3.3 转换属性
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
3.4 transform-origin
3.4.1 定义和用法
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
3.4.2 语法
transform-origin: x-axis y-axis z-axis; 默认值：50% 50% 0
x-axis 定义视图被置于 X 轴的何处。
可能的值：left center right length %
y-axis 定义视图被置于 Y 轴的何处。
可能的值：top center bottom length %
z-axis 定义视图被置于 Z 轴的何处。
可能的值：length
注：该属性必须与 transform 属性一同使用。
四、CSS3 filter(滤镜) 属性
4.1 定义和使用
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。默认值是none
支持的效果有：
－blur（模糊） 给图像设置高斯模糊,"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，
则默认是0；这个参数可设置css长度值，但不接受百分比值。
－grayscale（灰度）
－drop-shadow（阴影）
－sepia（褐色滤镜）
－brightness（亮度）
－contrast（对比）
－hue-rotate（色相）
－invert（反相）
－saturate（饱和度）
－opacity（透明度）
五、:root 伪类
这个伪元素匹配的是文档的根元素，也就是 <html> 标签。
所以常用于声明全局的 CSS 变量：
:root {
--color: #fff;
}
在使用时：
img {
background: var(--base);
}
六、CSS 变量(自定义属性)
参考：CSS 变量教程
6.1 变量的声明
声明变量的时候，变量名前面要加两根连词线（--）。
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
上面代码中，body选择器里面声明了两个变量：--foo和--bar。
它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。
注：变量名大小写敏感，--header-color和--Header-Color是两个不同变量。
6.2 var() 函数
6.2.1 var()函数用于读取变量。
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
6.2.2 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--foo, #7F583F);
6.2.3 第二个参数不处理内部的逗号或空格，都视作参数的一部分。
var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);
6.2.4 var()函数还可以用在变量的声明。
:root {
--primary-color: red;
--logo-text: var(--primary-color);
}
6.2.5 变量值只能用作属性值，不能用作属性名。
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
上面代码中，变量--side用作属性名，这是无效的。
6.3 JavaScript 操作
JavaScript 操作 CSS 变量的写法如下。
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.body.style.removeProperty('--primary');
七、HTML5 中的自定义数据属性 dataset
HTML5 中可以为元素添加非标准的自定义属性，只需要加上 data- 前缀，可以随便添加和命名。添加之后，可以通过元素的 dataset 属性来访问这些值，dataset 的值是 DOMStringMap 的一个实例化对象，其中包含之前所设定的自定义属性的“名-值”对。
例如：在项目中处理参数值（一个有 px 、另一个没有）
运用 dataset 储存后缀，有 px 后缀的标签中设置 <input data-sizing: px>：
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<input type="color" name="base" value="#8aa8af">
JS 中通过 dataset.sizing 来获取后缀值：
const suffix = this.dataset.sizing || '';
此时 suffix 获取到的值，针对颜色为空，而针对长度类的则为 'px'。
八、用 JavaScript 改变 CSS 属性值
在 JavaScript 中 document.documentElement 即代表文档根元素。所以要改变全局的 CSS 变量，可以这样写：
document.documentElement.style.setProperty('--base', '#fff');
或
document.body.style.setProperty('--primary', '#7F583F');
document.documentElement和document.body的区别
参考：document.documentElement和document.body的区别
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
documentElement 和 body 相关说明：
(1) body是DOM对象里的body子节点，即 <body> 标签；
(2) documentElement 是整个节点树的根节点root，即<html> 标签；
(3DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
九、toggle() 方法
9.1 定义和用法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
9.2 语法
$(selector).toggle(speed,callback,switch)
speed
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。
可能的值：毫秒 （比如 1500）"slow" "normal" "fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数，则无法使用 switch 参数。
callback
可选。toggle 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。
switch
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数，则无法使用 speed 和 callback 参数。
注：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
9.3 向 Toggle 事件绑定两个或更多函数
toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。
在javascript中toggle()为连续点击事件,当里面含有多个function(){}函数时,每次点击依次执行里面的function的函数,直至最后一个.随后每次点击都重复对这几个函数的轮番调用
语法：$(selector).toggle(function1(),function2(),functionN(),...)
function1() 必需。规定当元素在每偶数次被点击时要运行的函数。
function2() 必需。规定当元素在每奇数次被点击时要运行的函数。
functionN(),... 可选。规定需要切换的其他函数。
