CSS奇淫巧技：複雜背景圖案——網格圖、波點圖的實現

---

theme: channing-cyan

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第12天。

知識點：CSS線性漸變，條紋背景

背景

我們還可以使用 CSS 來建立網格、波點、棋盤等圖案，用 CSS 漸變幾乎可以建立任何種類的集合圖案，只是有時會不太好維護，需要藉助 CSS 前處理器（比如 sass）來減少冗餘程式碼。今天我們只介紹純 CSS 的案例。

效果實現

網格/桌布

使用多個漸變圖案組合實現。

```html

``` 實現效果圖：

我們還可以寫出網格中每個格子大小可調，網格線條粗細固定的圖案，這時我們使用長度而不是百分比作為色標的場景。 ```html

``` 實現效果圖：

波點圖

簡單波點

```html

``` 實現效果圖：

雙層波點圖

```html

``` 實現效果圖：

請注意，為了達到效果，第二層背景的偏移定位值必須是貼片寬高的一半。

css 還可以實現很多複雜的圖案，那就需要大家發動自己聰明的小腦瓜去創造了，需要用到的知識也更加複雜，感興趣的小夥伴自行摸索吧。

小工具分享

統計CSS程式碼的檔案體積的小工具：點這 只要把你的 CSS 粘進去即可統計。