（1）HTML5 Web Audio API 添加聲音
對簡單或復(fù)雜的聲音進(jìn)行混合识埋；
精確控制聲音的密度和節(jié)奏；
內(nèi)置淡入/淡出零渐，顆粒噪點(diǎn)窒舟，音調(diào)控制等效果；
靈活的處理在音頻流的聲道诵盼，使它們成為拆分和合并惠豺；
處理從<audio>音頻或<video>視頻的媒體元素的音頻源；
使用MediaStream的getUserMedia()方法事實(shí)處理現(xiàn)場輸入的音頻风宁，例如變聲洁墙；
立體音效，可以支持多種3D游戲和沉浸式環(huán)境戒财；
利用卷積引擎热监，創(chuàng)建各類線性音效，例如小/大房間饮寞、大教堂孝扛、音樂廳列吼、洞穴、隧道疗琉、走廊冈欢、森林、圓形劇場等盈简。尤其適用于創(chuàng)建高質(zhì)量的房間效果。
高效的實(shí)時(shí)的時(shí)域和頻分析太示，配合CSS3或Canvas或webGL可以實(shí)現(xiàn)音樂可視化支持柠贤；
以及其他多種音頻波形算法控制，幾乎就是把一個(gè)音頻編輯類軟件搬到web上类缤。
#######最直接有效：可以直接產(chǎn)生聲音臼勉，并且可以隨意控制音調(diào)，時(shí)長以及淡入淡出等效果
window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
if (!window.AudioContext) {
alert('當(dāng)前瀏覽器不支持Web Audio API');
return;
}
// 按鈕元素
var eleButton = document.getElementById('button');
// 創(chuàng)建新的音頻上下文接口
var audioCtx = new AudioContext();
// 發(fā)出的聲音頻率數(shù)據(jù)餐弱，表現(xiàn)為音調(diào)的高低
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];
// 音調(diào)依次遞增或者遞減處理需要的參數(shù)
var start = 0, direction = 1;
// 鼠標(biāo)hover我們的按鈕的時(shí)候
eleButton.addEventListener('click', function () {
// 當(dāng)前頻率
var frequency = arrFrequency[start];
// 如果到頭宴霸，改變音調(diào)的變化規(guī)則（增減切換）
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改變索引，下一次hover時(shí)候使用
start = start + direction;
// 創(chuàng)建一個(gè)OscillatorNode, 它表示一個(gè)周期性波形（振蕩）膏蚓，基本上來說創(chuàng)造了一個(gè)音調(diào)
var oscillator = audioCtx.createOscillator();
// 創(chuàng)建一個(gè)GainNode,它可以控制音頻的總音量
var gainNode = audioCtx.createGain();
// 把音量瓢谢，音調(diào)和終節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode對象，表示當(dāng)前audio context中所有節(jié)點(diǎn)的最終節(jié)點(diǎn)驮瞧，一般表示音頻渲染設(shè)備
gainNode.connect(audioCtx.destination);
// 指定音調(diào)的類型氓扛，其他還有square|triangle|sawtooth
oscillator.type = 'sawtooth';
// 設(shè)置當(dāng)前播放聲音的頻率，也就是最終播放聲音的調(diào)調(diào)
oscillator.frequency.value = frequency;
// 當(dāng)前時(shí)間設(shè)置音量為0
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// 0.01秒后音量為1
// audioCtx.currentTime论笔，其值是以雙精度浮點(diǎn)型數(shù)字返回硬件調(diào)用的秒數(shù),這個(gè)時(shí)間無法改變的采郎，無論是
// 暫停或者重置都不可以
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音調(diào)從當(dāng)前時(shí)間開始播放
oscillator.start(audioCtx.currentTime);
// 1秒內(nèi)聲音慢慢降低狂魔，是個(gè)不錯(cuò)的停止聲音的方法
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視區(qū)單位配合rem響應(yīng)式排版和布局
vw – 視區(qū)寬度百分值
vh – 視區(qū)高度百分值
vmin – vw或vh蒜埋，取小的那個(gè)
vmax – vw或vh，取大的那個(gè)
兼容性
JS實(shí)現(xiàn)自適應(yīng)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實(shí)現(xiàn)自適應(yīng)REM
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作為16px基準(zhǔn)最楷，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);
}
}
水平居中布局與滾動(dòng)條跳動(dòng)
當(dāng)前web屆整份，絕大多數(shù)的頁面間布局都是水平居中布局，主體定個(gè)寬度管嬉，然后margin: 0 auto的節(jié)奏~
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中的計(jì)算蚯撩，IE9+瀏覽器支持
最后础倍，100vw相對于瀏覽器的window.innerWidth，是瀏覽器的內(nèi)部寬度胎挎，滾動(dòng)條寬度也計(jì)算在內(nèi)沟启！而100%是可用寬度忆家，是不含滾動(dòng)條的寬度。
于是德迹，calc(100vw - 100%)就是瀏覽器滾動(dòng)條的寬度大醒壳洹（如果有，如果沒有滾動(dòng)條則是0）胳搞！左右都有一個(gè)滾動(dòng)條寬度（或都是0）被占用卸例，主體內(nèi)容就可以永遠(yuǎn)居中瀏覽器，從而沒有任何跳動(dòng)肌毅！
2.2 ch單位與等寬字體
對比：
iiiiii
mmmmmm
iiiiii
mmmmmm
1ch表示一個(gè)0字符的寬度筷转，所以000000所占據(jù)的寬度就是6ch。此單位悬而，基本上呜舒，必須與等寬字體一起使用才有用。
應(yīng)用：打點(diǎn)動(dòng)畫
（3）了解CSS/CSS3原生變量var
由less/sass的用法聯(lián)想到這個(gè)東西笨奠，感覺這兩個(gè)東西最大的好處就是可以定義CSS變量袭蝗，以提供給其他頁面復(fù)用，于是有了var將迎刃而解并且是原生的般婆。
#######兼容性
#######作用域
#######CSS變量使用完整語法
CSS變量使用的完整語法為：var( [, ]? )到腥，用中文表示就是：var( <自定義屬性名> [, <默認(rèn)值 ]? ),但是，不能包含$腺兴，[左电，^，(页响，%等字符篓足，普通字符局限在只要是“數(shù)字[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);
}
請問栈拖，此時(shí)<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);
}
#######變量定義時(shí)可傳遞
.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 操作符
眾所周知没陡，不同的瀏覽器（不管是現(xiàn)代瀏覽器還是老版本的IE瀏覽器）對Web頁面的解析都是不一樣涩哟，為了讓W(xué)eb頁面在這些瀏覽器下渲染達(dá)到基本一致的情況，給用戶更好的體驗(yàn)盼玄，我們必須為他們寫不同的樣式代碼贴彼。CSS3 Conditional Rules Module Level 3推出了“@supports”條件判斷規(guī)則，它充許我們可以根據(jù)瀏覽器對CSS特性的支持情況來定義不同的樣式埃儿。
@supports not (display: flex){ #container div{float:left;}}
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
在@supports中“or”和“and”混用時(shí)器仗，必須使用括號（）來區(qū)分其優(yōu)先級：
@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規(guī)范提供了兩種寫法
var supportsFlex = CSS.supports("display", "flex");
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)")
（5）CSS3 filter:drop-shadow濾鏡與box-shadow區(qū)別應(yīng)用
box-shadow: h-shadow v-shadow blur spread color inset;
filter: drop-shadow(h-shadow v-shadow spread color);
內(nèi)陰影
盒陰影 VS 真正意義的陰影
應(yīng)用：圖片非透明區(qū)域變色
.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瀏覽器下，如果一個(gè)元素的主體部分精钮，無論以何種方式威鹿，只要在頁面中不可見，其drop-shadow是不可見的轨香；實(shí)體部分哪怕有1像素可見忽你，則drop-shadow完全可見。
CSS3 filter系列：
