全部工具
设计
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 代码