🧩 CSS 生成器合集

这六个生成器各自输出什么，哪些地方容易抄错

六个页签共用上面那块预览台和下面这个代码框：换页签时预览台跟着换，代码框里始终是当前页签生成的那一段。每次拖动滑杆、点预设、加一层阴影或换一个色标，预览和代码同步更新，不需要先点某个「生成」按钮。

阴影：多层是怎么叠的？

一层对应 box-shadow 逗号分隔里的一项，列表里排在上面的先画、盖在下面的之上，所以第一层通常是那圈最贴边的窄阴影，最后一层是散开的大面积柔光。每层能单独勾内阴影（inset）、改颜色和不透明度，最多 6 层。颜色带透明度时输出 rgba()，不透明时输出 #rrggbb，两种写法浏览器都认，抄哪个都不会差一个色阶。预览台右上有四种底色，其中棋盘格专门用来看半透明阴影。

渐变：线性角度和锥形起始角不是一回事

线性的 0deg 指向正上方、顺时针加，跟数学里的极角相反，所以「向右」是 90deg；页签里另给了四个方向按钮，点它填的是 to right 这类关键字写法，和角度写法效果一样但更好读；两种写法只输出最近动过的那一个，拖过角度滑杆就换回 deg。径向的中心点、大小和形状分别对应 at 与 circle / ellipse；锥形从起始角开始顺时针扫一圈，起始角只决定第一格颜色落在哪儿。色标位置写百分比，中间几个可以随意重叠——相邻两个色标写同一个位置就是硬边界，做条纹和色块墙靠这个。

圆角：什么时候才会输出斜杠

四角同值时输出一行 border-radius: 24px；四个角分开时按左上、右上、右下、左下顺时针写。勾上「启用椭圆角」才会出现 水平 / 垂直 的斜杠写法，这时每个角各自有一对半径，叶片、水滴、对话气泡那一类形状靠它。半径之和超过边长时浏览器会按比例整体缩小，不会溢出，所以滑杆可以一路拉到底，看到的形状就是浏览器实际画出来的。

Flex 和 Grid：代码里为什么有两个选择器

布局属性分容器和子项两层，所以生成的代码是两段：一段给容器（display 那一族），一段给子项。预览里的格子可以直接点，点中哪一项，右边那组参数就只管它，代码里对应 :nth-child(n) 这种写法，粘过去改个类名就能用。Flex 的「多行对齐」只在换行真的发生时才起作用，不换行时它写了也没效果；Grid 的「自适应」用 repeat(auto-fit, minmax())，auto-fit 会把空轨道压扁让现有列撑满，auto-fill 保留空轨道，这两种排法在窄屏上的差别最明显；「自定写法」填进去的字符串原样落在 grid-template-columns 里，做「侧栏 200px + 正文自适应」这种不对称布局用它。

动画：关键帧名字和循环的坑

输出分两段——@keyframes 名字 和带 animation 简写的规则块，名字可以改，两段会同步。时长不足 1 秒按毫秒写，满 1 秒换成秒，免得 1000ms 和 1s 混着抄。勾上「鼠标移上才动」后，那段 animation 会从常规规则挪进 :hover 规则，鼠标一移开元素就回到静止状态；要让元素动完停在最后一帧，用不勾循环再配「空档表现＝结束后」。速度曲线选「自定义」时四个滑杆就是 cubic-bezier() 的四个参数，图上两个圆点跟着走，纵轴允许超出 0–1，超出就是回弹。

所有代码都在浏览器里现拼，不上传任何参数；页面地址栏里的 #tab= 只记你当前停在哪个页签，把这串链接发给别人，对方打开就落在同一页签上。