全部工具
設計
CSS 棋盤格背景產生器

CSS 棋盤格背景產生器

使用 CSS 產生棋盤格背景圖案。

類型

圖樣 1圖樣 2圖樣 3

底色 (#e8f9fa)

圖樣色 (#06c0cc)

大小 (10px)

background-color: #e8f9fa;
background-image: linear-gradient(45deg, #06c0cc 25%, transparent 25%, transparent 75%, #06c0cc 75%),linear-gradient(45deg, #06c0cc 25%, transparent 25%, transparent 75%, #06c0cc 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;

說明

根據底色與圖樣色即時產生 3 種棋盤格 CSS 圖案。

圖樣

圖樣 1	經典棋盤格圖樣
圖樣 2	等間距方格 / 網格圖樣
圖樣 3	維希格紋（gingham）

設定

底色	設定背景底色。
方格顏色	設定方格顏色。
大小	設定方格大小。

相關工具

CSS 條紋

使用 CSS 產生條紋背景圖案。

設計CSS程式碼

CSS 波點

使用 CSS 產生波點背景圖案。

設計CSS程式碼

CSS 漸層

產生線性與徑向漸層的 CSS。

設計CSS程式碼

CSS 陰影

產生可調參數的外陰影/內陰影 CSS。

設計CSS程式碼

佔位圖

為原型與線框圖產生佔位圖片。設定圖片尺寸、背景/文字顏色與文字，即可取得可直接存取的圖片 URL。

檢查 JSON

檢查 JSON（可選支援 JSONP）並找出語法錯誤。

程式碼JSON驗證

佔位文字

為設計與線框圖產生佔位文字。支援預設或自訂文字，並輸出指定的字元數。

HTML 實體

編碼與解碼 HTML 實體（例如 & ↔ &）。

編碼HTML程式碼

設計 CSS 程式碼