Javascript30之03 – 图片变变变（CSS变量）
从这个项目的教学视频学会一个新的英语短语：smart alec – 自作聪明的人。
从图片可以看出这个项目就是一个可以调整三个参数对图片进行处理的网页，主要是为了介绍CSS原生的变量。
CSS中原生的变量定义语法是：--*，变量使用语法是：var(--*)。这也太麻烦了吧
:root 是根选择器，其实也就是选择。在根上定义这几个CSS变量，就可以全局使用了。
:root {--base: #ffc600;--spacing: 10px;--blur: 10px;}然后在图片上应用：
img{padding: var(--spacing);background: var(--base);filter: blur(var(--blur)); /* filter属性定义了元素(通常是![]()
)的可视效果(例如：模糊与饱和度)。 */}给图片设置一个background，再加上padding，这样的方式构成图片的spacing。（一开始我还奇怪为什么不是border）
