Input
<input type="color" value="#ff0000" />
<input type="range" min="0" max="11" value="5" />
用來創建一個允許用戶使用顏色選擇器的區域（不支持Alpha通道），注意HTML5新增的表單類型，見MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color
CSS變量
作用和Less類似，在整個文檔中重複使用的特定值。使用自定義屬性來設置變量名，並使用特定的 var() 來訪問。之前只用過Less，不知道這個的存在，原來原生的就可以實現。
文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
// 全局
:root {
--global-color: #666;
--pane-padding: 5px 42px;
}
// 局部
element {
--main-bg-color: brown; // 聲明
}
element {
background-color: var(--main-bg-color); // 使用
color: var(--global-color: #666;)
}
Filter
背景模糊和圖片模糊
會產生的問題：白邊和容器外圍模糊
HTMLElement.dataset
HTML5 中的自定義數據屬性集 dataset （屬性集合，理解爲一個對象？）
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
var el = document.querySelector('#user');
el.id == 'user'
el.dataset.id === '1234567890'
el.dataset.user === 'johndoe'
el.dataset.dateOfBirth === ''
用 JavaScript 改變 CSS 屬性值
在 JavaScript 中 document.documentElement 即代表文檔的根元素，也就是 <html> 標籤。
document.documentElement.setProperty('--global-color', '#fff');
<style>
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur));
}
</style>
思路：傳入每次鼠標點擊或者滑動之後的新value給全局CSS變量，然後把根元素的樣式應用在結果圖片上
input.addEventListener('mousemove', handleUpdate)
DOM 將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。