（1）HTML5 Web Audio API 添加声音
对简单或复杂的声音进行混合；
精确控制声音的密度和节奏；
内置淡入/淡出，颗粒噪点，音调控制等效果；
灵活的处理在音频流的声道，使它们成为拆分和合并；
处理从<audio>音频或<video>视频的媒体元素的音频源；
使用MediaStream的getUserMedia()方法事实处理现场输入的音频，例如变声；
立体音效，可以支持多种3D游戏和沉浸式环境；
利用卷积引擎，创建各类线性音效，例如小/大房间、大教堂、音乐厅、洞穴、隧道、走廊、森林、圆形剧场等。尤其适用于创建高质量的房间效果。
高效的实时的时域和频分析，配合CSS3或Canvas或webGL可以实现音乐可视化支持；
以及其他多种音频波形算法控制，几乎就是把一个音频编辑类软件搬到web上。
#######最直接有效：可以直接产生声音，并且可以随意控制音调，时长以及淡入淡出等效果
window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
if (!window.AudioContext) {
alert('当前浏览器不支持Web Audio API');
return;
}
// 按钮元素
var eleButton = document.getElementById('button');
// 创建新的音频上下文接口
var audioCtx = new AudioContext();
// 发出的声音频率数据，表现为音调的高低
var arrFrequency = [100, 2000, 300, 196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
// 音调依次递增或者递减处理需要的参数
var start = 0, direction = 1;
// 鼠标hover我们的按钮的时候
eleButton.addEventListener('click', function () {
// 当前频率
var frequency = arrFrequency[start];
// 如果到头，改变音调的变化规则（增减切换）
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改变索引，下一次hover时候使用
start = start + direction;
// 创建一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来说创造了一个音调
var oscillator = audioCtx.createOscillator();
// 创建一个GainNode,它可以控制音频的总音量
var gainNode = audioCtx.createGain();
// 把音量，音调和终节点进行关联
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备
gainNode.connect(audioCtx.destination);
// 指定音调的类型，其他还有square|triangle|sawtooth
oscillator.type = 'sawtooth';
// 设置当前播放声音的频率，也就是最终播放声音的调调
oscillator.frequency.value = frequency;
// 当前时间设置音量为0
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// 0.01秒后音量为1
// audioCtx.currentTime，其值是以双精度浮点型数字返回硬件调用的秒数,这个时间无法改变的，无论是
// 暂停或者重置都不可以
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音调从当前时间开始播放
oscillator.start(audioCtx.currentTime);
// 1秒内声音慢慢降低，是个不错的停止声音的方法
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒后完全停止声音
oscillator.stop(audioCtx.currentTime + 1);
});
})();
https://codepen.io/gregh/embed/LxJEaj?height=256&theme-id=0&default-tab=result&embed-version=2
（2）CSS新单位
2.1基于vw等viewport视区单位配合rem响应式排版和布局
vw – 视区宽度百分值
vh – 视区高度百分值
vmin – vw或vh，取小的那个
vmax – vw或vh，取大的那个
兼容性
JS实现自适应REM
function setRootFontSize () {
const xViewport = window.innerWidth;
const maxWidth = xViewport > 414 ? 414 : xViewport;
const fs = maxWidth / 3.75;
window.document.documentElement.style.fontSize = `${fs}px`;
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
纯CSS实现自适应REM
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
水平居中布局与滚动条跳动
当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~
https://shangmiyun.com/#/account/login?backPath=%2F
http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html
1
1
1
1
1
1
1
1
1
1
1
1
.wrap-outer {
margin-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定宽主体的父级
然后，calc是CSS3中的计算，IE9+浏览器支持
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw - 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器，从而没有任何跳动！
2.2 ch单位与等宽字体
对比：
iiiiii
mmmmmm
iiiiii
mmmmmm
1ch表示一个0字符的宽度，所以000000所占据的宽度就是6ch。此单位，基本上，必须与等宽字体一起使用才有用。
应用：打点动画
（3）了解CSS/CSS3原生变量var
由less/sass的用法联想到这个东西，感觉这两个东西最大的好处就是可以定义CSS变量，以提供给其他页面复用，于是有了var将迎刃而解并且是原生的。
#######兼容性
#######作用域
#######CSS变量使用完整语法
CSS变量使用的完整语法为：var( [, ]? )，用中文表示就是：var( <自定义属性名> [, <默认值 ]? ),但是，不能包含$，[，^，(，%等字符，普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合，但是可以是中文，日文或者韩文
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
请问，此时<body>的背景色是？
A. transparent B. 20px C. #369 D. #cd0000
body {
--size: 20;
font-size: var(--size)px;
}
.
.
.
.
等于 font-size:20 px
.
.
..
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
#######变量定义时可传递
.box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}
#######可以用JS修改
:root {
--颜色: cornflowerblue;
}
h1 { color: var(--颜色); }
a { color: var(--颜色); }
strong { color: var(--颜色); }
const rootEl = document.documentElement;
rootEl.style.setProperty('--颜色', 'plum');
（4）@supports 操作符
众所周知，不同的浏览器（不管是现代浏览器还是老版本的IE浏览器）对Web页面的解析都是不一样，为了让Web页面在这些浏览器下渲染达到基本一致的情况，给用户更好的体验，我们必须为他们写不同的样式代码。CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则，它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。
@supports not (display: flex){ #container div{float:left;}}
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级：
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { // ...}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { // ...}
#######JS支持
在javascript中支持css的@supports的写法是“window.CSS.supports”。CSS.supports规范提供了两种写法
var supportsFlex = CSS.supports("display", "flex");
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)")
（5）CSS3 filter:drop-shadow滤镜与box-shadow区别应用
box-shadow: h-shadow v-shadow blur spread color inset;
filter: drop-shadow(h-shadow v-shadow spread color);
内阴影
盒阴影 VS 真正意义的阴影
应用：图片非透明区域变色
.test4{
width: 100px;
height: 100px;
position: relative;
left: -100px;
background: url(./icon3.png) no-repeat;
background-size: 100% 100%;
filter: drop-shadow(red 100px 0px);
border-right: 100px solid transparent;
}
.test{
width: 100px;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
在Chrome浏览器下，如果一个元素的主体部分，无论以何种方式，只要在页面中不可见，其drop-shadow是不可见的；实体部分哪怕有1像素可见，则drop-shadow完全可见。
CSS3 filter系列：
