單一 Div 實現 CSS 繪圖：從幾何圖形到逼真蠟筆與相機

前言：為何限制自己只用一個 Div？

2013 年 CSSConf 上 Lea Verou 關於 border-radius 的演講啟發了我：CSS 還有大量未被探索的行為。就像畫家只用三原色調出萬千色澤，限制工具反而能激發創造力，深入掌握媒介本質。我決定挑戰「單 Div 繪圖」，探索 CSS 極限。

工具箱：一個 Div + 三個可樣式元素

利用偽元素 ::before、::after，一個 Div 實際上提供三個可獨立樣式的層疊元素：

div { background: red; }
div::before { background: yellow; }
div::after { background: blue; }

心智模型：三層疊加，各自獨立定位、尺寸、背景、邊框、陰影、漸層。

三大基礎圖形

• 矩形/正方形：width / height
• 圓/橢圓：border-radius: 50%
• 三角形/梯形：透明邊框技巧 border: 20px solid transparent; border-bottom-color: red;

複雜圖形多由上述基礎圖形組合、疊加、裁切而成。

進階技巧：多重 box-shadow 產生無限複製

box-shadow 支援逗號分隔多組陰影，每組可設定偏移、模糊、擴散、顏色。善用它可在不增加 DOM 的情況下產生大量相同形狀：

div {
    box-shadow:
        170px 0 10px yellow,
        330px 0 0 -20px blue,
        330px 5px 5px -20px black;
}

甚至可對陰影再加陰影（層疊順序即繪製順序）。

漸層：光影與細節的關鍵

線性漸層 linear-gradient、徑向漸層 radial-gradient 可模擬光源、材質、紋理。多重 background-image 疊加可構建極豐富視覺層次：

div {
    background-image:
        linear-gradient(to right, gray, white, gray, black),
        radial-gradient(circle, yellow 50%, transparent 50%);
}

實戰拆解：綠色蠟筆

1. 筆身：div 設定綠色背景 + 底部陰暗漸層 + box-shadow 立體感。
2. 紙包裝：左至右 linear-gradient 畫出包裝區塊（半透明讓筆身漸層透出）。
3. 條紋：同向 linear-gradient 以多色標控制細線條。
4. 印刷橢圓：radial-gradient(ellipse at top, ...) 一行搞定。
5. 筆尖：::before 用邊框畫三角形，顏色同筆身。
6. 高光：::after 縱向 linear-gradient 模擬反光貫穿筆身與筆尖。
7. 文字：::after 用 content: 'green' 定位印在包裝上。

所有背景圖層按繪製順序疊加在 div 的 background-image 中，最後呈現逼真蠟筆。

實戰拆解：單 Div 相機

• 機身：div 用 background-image + border-image 繪製主體。
• 細節（鏡頭、按鈕、閃光燈...）：::before 一個黑色矩形 + 超長 box-shadow 清單，每組陰影對應一個細節部件。
• 鏡頭圈：::after 灰色圓形 + border-radius: 50% + 複雜 box-shadow 堆疊出鏡頭鏡片、倒影、陰影。

數百行 box-shadow 參數看似瘋狂，實則是「層疊座標繪圖」的極致體現。

兩大核心挑戰與應對

1. 三角形限制

邊框三角形無法單獨套用 border-image 漸層、無法加 box-shadow、難以複製。應對：改用漸層畫三角形、或用旋轉矩形裁切、或接受實體三角形僅用於簡單場景。

2. 多層漸層堆疊邏輯

漸層預設填滿整個背景區域，疊加時需精確控制透明度、z-index（背景圖層順序）、可見區域。技巧：用對向漸層「遮罩」部分區域，像 Tardis 繪圖所示，多層縱向漸層配合橫向遮罩產生豐富細節。

神器：CSS Gradient Inspector

Chrome 擴充套件，可逐層開關檢視元素上的每個漸層，如同 Photoshop 圖層面板，除錯與學習極佳。

結語

單 Div 繪圖不是炫技，而是理解 CSS 渲染機制、背景疊加、陰影座標、漸層遮罩的最佳練兵場。掌握這些核心能力，實際專案中處理複雜 UI、動畫、響應式設計時將更得心應手。