用可视化的方式生成 CSS

这几行 CSS 大家平时都是靠试错写出来的，区别只是这里的试错发生在滑块上，而不是在你的样式表里。

正在加载工具……

工作原理

这个页面上的每一步操作，都由运行在你浏览器标签页里的代码完成，用的就是渲染网页的那套引擎。文件从磁盘读进标签页的内存，在那里被处理，再作为下载写回去。它不会被送到任何地方 —— 不会送给我们，也不会送给第三方。

打开浏览器的开发者工具（F12），选择“网络”（Network）面板。
载入你的文件，运行这个工具。
你能看到的请求只有这些：工具自己的代码 —— 少数几个重型工具还会从公共 CDN 取它们的开源引擎 —— 外加一条发往 loreatec.jp 的小小访问记录（页面地址和标题，仅此而已）。没有一条带着你的文件。

clamp() 面板到底算的是什么？

线性斜率。你只要说“视口 360px 时是 16px，1280px 时是 32px”，它就会给出 clamp(16px, 8.3px + 2.17vw, 32px)——数值会在你给的两个宽度之间平滑变化，两端各自封顶。公式本身很简单，但没人记得住；这就是这个工具存在的全部意义。

为什么预设的阴影比我自己写的看起来更真实？

因为真实的阴影，透明度比直觉想的更低、模糊范围更大、扩张值还带一点负数，这些都和凭直觉写出来的不一样。预设已经把这些比例封装好了；从一个预设开始微调，比从 0 0 5px black 从零写起要靠谱。

能做出那种不规则、有机形状的圆角吗？

勾选“每个角单独设置”，把四个圆角半径分别设置好 —— 两个对角设得特别大，就会出现树叶或水滴般的形状。要做出完全有机的水滴形状，需要用到双值圆角语法，这超出了这个面板的范围；这里覆盖的是大家实际会用到的那些形状。

有什么内容会被发送出去吗？

没有。预览用的就是一个套上了你设置的样式的 div —— 一个工具能做到的最“本地”的程度，大概也就是这样了。