---
# System prepended metadata

title: JS30 筆記 03 - CSS Variables
tags: [JavaScript, JS30]

---

JS30 筆記 03 - CSS Variables
===

![](https://i.imgur.com/rPTrZ4X.png)

## 題目
利用 CSS 變數調整 spacing（邊框大小） blur（模糊程度） color（顏色）

## 解題
1. 利用 [CSS Variables](https://www.w3schools.com/css/css3_variables.asp) 需告三個變數 --spacing、--base、--blur（變數前要有 two dashes (--)）
2. CSS 建立 img  的樣式，並套入 CSS 變數
3. controls 下的　input 加入監聽 addEventListener -> change 與 

###### tags: `JS30` `JavaScript`