CSS在线编辑器生成的不是完整样式，而是一份相对默认值的差异清单

摘要：10个分类、83个控件，滑块一拉预览区跟着变，这是它的正面。但复制按钮给你的从来不是一份完整样式，而是一份"相对工具出厂值的差异清单"——你调回默认的那些属性会被整条丢掉。麻烦的是有7个属性的工具出厂值和CSS规范的初始值并不一样，其中就包括display和text-align，于是你明明选了却什么都没生成。另外盒模型和定位那8个自由文本框只认带单位的值，填个300进去，那条声明会原样躺在代码里被浏览器整条忽略。

可视化调CSS这件事，需求是真实存在的。写样式的时候最耗时的往往不是想不出要什么效果，而是记不清某个属性的取值有哪几种、某个阴影的四个数字分别管什么。有个能拖着看的面板确实省事。

但可视化工具有个共同的软肋：它给你的是它自己那套内部状态的投影，不是浏览器真实的渲染契约。这中间的落差，就是这篇要讲的东西。

CSS在线编辑器保哥把83个控件的定义全拉出来对了一遍，又把生成逻辑单独跑了几组输入。下面的每个结论都是这么来的。

这个CSS在线编辑器覆盖了哪些属性？

10个分类，83个控件。分布不太均匀，盒模型和边框、阴影这三类占了将近一半。

四种控件类型，行为不一样

83个控件分四种：滑块、下拉、取色器、自由文本框。前三种是受控的，你只能选它给的值；只有自由文本框可以随便填，也只有它会出问题，后面单独讲。

滑块都带了范围限制，比如字号8到72、圆角0到100、外距允许负值到-50。这些范围是工具定的，不是CSS的限制。想要超出范围的值，这个面板给不了，得复制走之后手工改。

它不做的事比做的事更值得先看清

没有伪类，调不了悬停和聚焦状态；没有媒体查询，调不了响应式断点；没有Grid，只有Flex；选择器固定叫element，改不了。

换句话说它处理的是"一个元素在一种状态下的静态样式"。真实项目里的样式表有一大半工作量在状态和断点上，这部分它碰不到。把它当成一个取值助手，而不是样式编辑器，预期会准很多。

预览区可以换背景，这个小功能很有用

预览区上方有个背景切换，能在白底、深底和棋盘格之间换。棋盘格那个专门用来看半透明效果——调不透明度、调半透明阴影、调毛玻璃的时候，白底上看不出深浅，棋盘格一换立刻现原形。

预览文字也能改。默认是一句英文，换成中文能顺带检验字体族选得对不对：很多英文字体不含汉字，选上之后中文会退回系统兜底字体，效果和你预期的完全不同。做外贸站要中英混排的话，这一步别省。

83个控件里没有滤镜和裁剪

还有两类常用属性缺席：滤镜和裁剪路径。前者管模糊、灰度、亮度这些，后者管非矩形的形状裁切。这两类在现代页面里用得相当多，尤其是滤镜。

后面讲预设的时候会看到，毛玻璃那个预设之所以只是"看着像"，根子就在缺滤镜这一项上。

为什么调了半天，生成的代码里只有两三行？

这是新用户最容易困惑的一点，也是理解这个工具的钥匙。

它的生成逻辑只有一句话：把当前值和出厂默认值挨个比，一样的跳过，不一样的才写进代码。

这个设计本身是对的

先说好话。如果不这么做，83个控件全量输出，你会得到一段八十多行、绝大部分是废话的CSS。里面塞满了font-style: normal这种写了等于没写的声明，粘到项目里还会意外覆盖掉别处的样式。

只输出改动过的部分，是负责任的做法。工具自己的说明里也写了"只含非默认属性"。

但"默认"指的是工具的默认，不是CSS的默认

问题出在这儿。你在页面上看到的那个初始状态，是工具作者挑的一组值，它和CSS规范规定的属性初始值，不是同一回事。

保哥把两边逐条对了一遍，找出7个对不上的：

这7个属性有个共同特点：你在面板上选中它们的出厂值时，代码里不会出现这一条。因为在工具眼里"你没改"。

实测跑了一组：做一个Flex容器，display选flex、主轴对齐选flex-start、交叉轴对齐选stretch、间距12。生成的代码只有两行——display和gap。那两条对齐属性一个都没进去。

复制走的这段CSS，粘到项目里为什么不一定生效？

接着上面那个例子往下走，就到了真正的风险点。

你拿到的是差异集，不是完整样式

那份只有两行的代码，在一个纯净的空元素上跑，效果和预览区一模一样。因为空元素本来就没有别的样式来干扰。

可你要粘贴的地方通常不是空元素。它可能已经被某个组件库的类名设过justify-content: center，可能从父级继承了别的对齐方式。你这份代码里没有对齐属性，覆盖不掉任何东西，于是元素还是居中的，跟你在预览区看到的靠左完全不同。

这就是"在工具里明明是对的，粘过去就变样"的机制。不是工具算错了，是它给的这份代码从设计上就不打算描述完整状态。

做多语言站点的话，text-align这条要格外小心

表里那个text-align值得单拎出来。工具出厂值是left，CSS规范的初始值是start。

在中文、英文这类从左往右的语境里，start解析出来就是left，两者看不出区别。但在阿拉伯语、希伯来语这类从右往左的页面上，start解析出来是right。

于是场景变成这样：你在工具里特意选了left，以为锁死了左对齐，结果代码里根本没有这一条，阿拉伯语版页面上文字乖乖靠右排。这个问题在国内测试环境里永远复现不出来。

做小语种站点要提防的这类细节还有不少，字体和排版方向上的坑保哥在网页字体在英文站只占几十KB，到了小语种站就变成拖慢首屏的最大一块里整理过。

怎么绕开这个问题

最省事的办法：凡是你真心要锁定的属性，先故意选一个别的值，再选回你要的值——不行，选回去它照样判成默认。

正确的办法是复制走之后手工补。把那7个属性记在心里，生成代码后对照一下，你想要但没出现的，自己加上去。清单不长，7条而已。

判断标准也简单：问自己一句"这条属性我是不是需要它去覆盖别人"。如果是，就必须显式写出来，哪怕它的值看起来和默认一样。如果只是要个视觉效果、目标元素上本来也没人设过这条，那不写也无所谓。

display那一条最容易出事

七条里display的杀伤力最大，因为它决定元素的盒类型，一步错后面全错。

典型场景是给一个行内元素加内距。行内元素的上下内距不占据布局空间，你得先把它改成inline-block或者block才行。而工具的出厂值恰好就是inline-block，你在下拉里选中它、预览区显示正常、代码里却没有这一行。

粘到项目里，那个元素还是行内元素，上下内距看着就像没生效。你会以为是内距的问题，回去把20像素改成40像素，还是没反应——因为病根在display上，而那一行压根没被生成出来。

或者换个思路：把这个工具当成取值参考，最终样式还是自己写。它帮你确定"阴影用12像素模糊看着最舒服"，具体那行CSS你自己敲。

宽度框里填300为什么没反应？

盒模型和定位这两类里有8个控件是自由文本框，不是滑块：宽度、高度、最小宽度、最大宽度，以及top、right、bottom、left。

填纯数字会生成一条无效声明

保哥在宽度框里填了300，生成的代码是这样：

.element {
    width: 300;
    padding-top: 20px;
}

注意宽度那行没有单位。CSS规范里除了0之外，长度值必须带单位，width: 300是一条无效声明，浏览器会把它整条丢掉。

所以预览区的宽度纹丝不动，你会觉得"填了没用"，然后再填一次，还是没用。

原因在控件类型上

滑块类的控件在定义里都配了单位，生成时会自动拼上px或者deg。这8个自由文本框没有配单位——因为它们本来就允许你填百分比、rem、auto、calc这些五花八门的东西，没法预设一个单位。

于是责任落到了填写的人身上：这8个框必须自己带单位。填300px有效，填50%有效，填auto有效，唯独填300无效。

反过来说，这8个框其实是最灵活的

知道规则之后，这8个框反而是整个面板里唯一能突破限制的地方。滑块的范围是写死的，而这里你可以填min(90%, 640px)这种现代写法，工具会原样带进代码。

换句话说，它不是校验不严，是压根不校验。这是把自由度和责任一起交给你了——用得好是特权，用不好就是那条被静默丢掉的width: 300。

怎么一眼看出自己填漏了单位

最快的办法是看代码区。生成的代码里，凡是滑块来的值都带着单位，只有这8个框可能光秃秃。扫一眼有没有哪条声明的值是个孤零零的数字，有就是漏了。

另一个信号是预览区完全没反应。滑块拖一下预览区必定跟着变，而文本框填错了单位是一点动静都没有的。填完之后眼睛往右边瞟一下，成本很低。

顺带提醒：这8个框也接受auto、none、inherit这类关键字，那些本来就不需要单位。所以"没单位"不等于"错"，得看填的是数字还是关键字。

七组滑块是怎么拼成一条声明的？

83个控件里有一部分不是一对一映射到CSS属性的，而是几个滑块合起来生成一条声明。

阴影只看偏移和模糊，不看颜色

盒阴影那六个滑块里，只有X偏移、Y偏移、模糊、扩展这四个参与判断。四个都是0的话，就算你把阴影颜色调成鲜红，也不会生成任何东西。

这个逻辑其实合理——四个几何参数全为0的阴影本来就看不见。但操作起来容易懵：颜色明明改了，代码里一片空白。记住先拉模糊或者偏移，再调颜色。

变换是按固定顺序拼的

七个变换滑块生成的是一条transform，里面的函数按旋转、缩放、倾斜、位移的固定顺序排列。

这个顺序不能改，而transform里函数的顺序是会影响最终结果的——先旋转再位移，和先位移再旋转，元素落点完全不同。如果你要的是另一种顺序，只能复制走之后自己调整函数排列。

另外缩放那两个滑块的判断方式和其他不太一样，它比的是"是不是等于1"，所以缩放拉到0会正常生成scaleX(0)，元素在预览区直接消失。这不是bug，是你确实这么要求的。

渐变角度那个滑块只对线性渐变有效

渐变那组有四个滑块：类型、角度、颜色1、颜色2。角度这个只在类型选线性时才进入生成结果，选径向的时候它照样能拖，但拖了没用——径向渐变本来就没有角度这个概念。

面板不会把它禁掉或者变灰，所以会出现"我明明在调角度，预览区一动不动"的情况。这类控件之间的联动缺失，在参数多的面板里挺常见，知道了就不会再纠结。

过渡那四项是各写各的

和上面几组不同，过渡的四个控件是一对一映射到四条独立声明的，不合成简写。所以你可能会拿到只有一条transition-duration的代码。

这样其实能正常工作，因为过渡属性默认就是全部、曲线默认就是ease。但如果项目里别处已经给这个元素设过transition简写，你这条单独的时长会被简写整个覆盖掉。又是一次"差异集"思维带来的麻烦。

开了渐变，之前调的背景色去哪了？

背景这一类里藏着一个会吃掉你先前设置的行为。

渐变会把背景色整条删掉

流程通常是这样：先在取色器里选了个背景色，看着还行；再把渐变类型从无改成线性，调好两个渐变色。这时候回头看代码，背景色那一行不见了。

生成逻辑里确实是这么写的：一旦渐变类型不是"无"，就生成一条background，同时把background-color删掉。

这么做有它的道理

background是个简写属性，它会把背景相关的一整组属性重置掉，其中就包括背景色。如果同时输出background-color和background，且background写在后面，那条背景色就是纯粹的噪音——它一定会被覆盖。

所以删掉是对的。只是这个动作发生得太安静，界面上那个取色器还显示着你选的颜色，容易让人以为它还在起作用。

想同时保留纯色兜底和渐变，得手工把两条调整成正确的顺序，或者用background-image来写渐变而不是background。这类简写属性的覆盖关系，是CSS里最容易踩的一类坑。

径向渐变只给了最简单的一种

渐变类型选径向的话，生成的是圆形径向渐变，圆心居中，两个色标。位置、形状、尺寸这些参数面板上都没有。

够用来看个效果，不够用来做正式设计。要精细控制还得手写，或者先在这儿定好两个颜色，再拿去改。配色本身怎么定、对比度够不够，可以配合颜色转换工具怎么用？HEX、RGB、HSL换算与CSS配色、对比度实战一起用。

七个预设分别适合什么场合？

面板下方有七个一键预设，点一下会把一整组属性刷进去。这是上手最快的路径。

预设会先重置再套用

点预设的时候，它会先把所有83个控件恢复到出厂值，然后再刷入这一组。也就是说你之前调的所有东西会被清空，不是叠加。

想在预设基础上改，顺序得是：先点预设，再动手调。反过来就白干了。这个交互挺常见，但没有二次确认，手滑一下心血就没了。

七个预设的实用度差别不小

卡片和按钮这两个是最有价值的，因为它们把内距、圆角、阴影这些需要反复试的数值给了一组能用的起点。徽章和提示框次之，主要价值在配色。

毛玻璃那个要留个心眼：真正的毛玻璃效果依赖背景模糊滤镜，而这个面板没有滤镜这一类。预设给的只是半透明底色加边框，视觉上像个半透明块，不是毛玻璃。要真效果得自己补那条滤镜声明。

霓虹那个也有类似情况。它靠一个大模糊的彩色盒阴影加一层文字阴影来模拟发光，在深色背景上确实像那么回事，但换到浅色背景上会变成一坨脏兮兮的绿雾。用它之前先把预览区背景切到深色，别在白底上判断。

预设里的定宽会跟着一起进代码

卡片预设带了300像素定宽，提示框预设带了320像素定宽。这两个值多半不是你想要的——真实项目里这类容器通常是自适应的。

它们会老老实实出现在生成的代码里，粘过去就变成一个死宽度，在窄屏上直接溢出。用这两个预设的时候，记得先把宽度改成auto或者百分比，再复制。移动端那一侧的溢出问题排查起来相当费劲，能在源头避掉最好。

面板打不开、控件不显示怎么办？

把这条写进来，是因为这类纯前端工具有个共同的失败模式，值得所有做前端的人知道。

整个界面靠一个脚本块撑着

这个页面的属性表、渲染逻辑、事件处理全部写在同一个脚本块里，页面加载完之后由一句初始化调用把界面画出来。左侧那十个分类标签、83个控件，全是运行时生成的，HTML里原本什么都没有。

这种结构的代价是：那个脚本块里任何一处语法错误，都会让整块脚本一行都不执行。结果不是"某个功能坏了"，而是左侧面板和代码区一起变成空白，页面框架却还在——头部、面包屑、下方的说明文字一切正常。

这个现象非常具有迷惑性，看着像样式没加载或者数据没返回，实际上是脚本压根没跑起来。

遇到空白面板先按这个顺序查

第一步打开浏览器控制台看有没有报错，语法错误会在这里直接指出行号和列号，比猜快得多。第二步强制刷新一次，排除掉缓存拿到旧版本的可能。第三步换个浏览器或者无痕窗口，排除扩展程序注入脚本导致的冲突。

这套顺序对任何"页面框架在但交互区空白"的场景都适用，不限于这个工具。前两步能解决绝大多数情况。

如果控制台里报的是语法错误，那基本可以确定不是你这边的问题，等站点修就行。如果报的是网络请求失败，那多半是某个外部资源被拦了，无痕窗口或者换网络能验证。两种报错的处理方向完全不同，先分清再动手。

还有一种情况值得单说：页面正常但复制按钮点了没反应。剪贴板接口在非安全上下文里是不可用的，也就是说通过HTTP而不是HTTPS打开的页面，复制功能会静默失败。这时候手工选中代码区的文字复制就行。

顺带一个通用教训

如果你自己的站点也有这种把数据和逻辑全塞进一个内联脚本块的页面，值得考虑拆成两块：数据一块，逻辑一块。这样数据里出个笔误，至少不会把整个交互层带走。

更彻底的做法是把关键结构写进HTML，让脚本只负责增强而不是负责生成。脚本挂了页面还能看，这在爬虫和弱网环境下尤其重要——搜索引擎对纯脚本生成内容的处理，跟对静态HTML完全是两回事，这一层的取舍在移动端SEO十大致命错误：CWV与INP实战修复指南里有展开。

把它放进前端工作流的三种姿势

说了这么多限制，它到底该怎么用才划算。

第一种，当数值试验场

这是它最强的用法。阴影的四个数字、圆角的大小、渐变的角度，这些东西光看代码想象不出效果，拖着滑块看是最快的。定下数值之后，那几行代码自己敲进项目里。

这种用法完全绕开了前面所有的坑——你只取数值，不取代码，默认值过滤和单位问题都碰不到。

阴影尤其值得这么用。box-shadow那四个数字的组合空间极大，纯靠脑补基本调不出满意的效果；而拖着六个滑块看，两分钟就能定下来。定完记下四个数字和一个颜色，回去自己写那一行。

补一种用法：给非前端的人看效果

还有个场景挺实用：跟设计或者运营对齐视觉的时候，打开这个面板当场拖给对方看。圆角要12还是16、阴影要不要更虚一点，比来回截图快得多。

这种场合下代码生不生成根本不重要，重要的是那个能实时变的方块。用完把数值记下来就行。

第二种，当属性速查表

忘了text-transform有哪几个取值、cursor能填什么、flex-wrap有几种，点开对应分类的下拉框看一眼就有。83个控件覆盖的取值范围，比翻文档快。

要注意的是它列的不一定是全集，比如display只给了七个常用值，实际取值远不止。当速查表用可以，当权威清单用不行。

这一点对刚上手CSS的人尤其要提醒。看到下拉里只有七项，很容易以为display就这七个值；实际上还有table系列、contents、flow-root等等，只是日常用得少所以没收进来。工具的取值范围反映的是作者的取舍，不是规范的边界。

真要查全集还是得回文档。好在知道属性名之后查起来很快，而这个面板最大的价值恰恰是帮你想起"哦，我要找的那个属性叫这个名字"。从"我想让文字全大写"到"原来是text-transform"，这一步它办得很好。

第三种，当代码起点，但必须补三样

如果确实要把生成的代码直接拿走，复制之后补这三件事：把那7个工具默认值和CSS初始值不一致的属性对照一遍，需要的手工加回去；检查8个自由文本框填的值有没有带单位；确认要不要保留渐变冲掉的背景色。

补完之后，最好再走一遍格式化和压缩，顺便看看有没有冗余声明。这一步用CSS格式化工具怎么用？美化、压缩与前端性能的真实账里讲的那套流程就行。

还有个习惯值得养成：把生成的那段代码先贴进浏览器开发者工具的样式面板试一下，而不是直接进项目。开发者工具会把无效声明划掉，单位漏了、值写错了一眼就能看见，比提交之后再回滚省事得多。

要连HTML结构一起试的话，这个面板就不够了，得换成能同时编辑三种语言的HTML编辑器怎么用？HTML/CSS/JS三栏实时预览，改一处看一处那类工具。两者定位不同，一个调单个元素的属性，一个看整段结构的效果。

常见问题解答

为什么调了很多属性，生成的代码只有几行？

它只输出和出厂默认值不同的属性，调回默认的会被整条丢掉。这个设计本身是对的，避免生成一堆无意义的声明。但要注意"默认"指的是工具自己的出厂值，不是CSS规范的初始值，两者有7个属性对不上。

哪些属性选了却不会出现在代码里？

实测有7个：display选inline-block、text-align选left、line-height选1.5、justify-content选flex-start、align-items选stretch、align-content选stretch、transform-origin选center。这些都是工具的出厂值，选中等于没改。需要的话复制代码后手工补上。

宽度框里填300为什么没效果？

因为生成的是width冒号300，没有单位。CSS里除了0以外的长度值必须带单位，这条声明无效，浏览器会整条忽略。盒模型的宽高和定位的四个方向共8个自由文本框都是这样，必须自己带单位，填300px或者50%才行。

复制的CSS粘到项目里为什么效果不一样？

因为拿到的是差异集不是完整样式。在空元素上效果一致，但目标元素如果已经被其他规则设过某个属性，而这份代码里正好没有这一条，就覆盖不掉。做法是把那7个不输出的属性对照一遍，需要锁定的手工加回去。

开了渐变之后背景色为什么消失了？

渐变类型一旦不是"无"，就会生成background这条简写并删掉background-color。这么处理是对的，因为background作为简写会重置背景色，两条同时存在时后者一定被覆盖。想保留纯色兜底得手工调整顺序，或者改用background-image来写渐变。

设了阴影颜色为什么代码里没有阴影？

盒阴影的生成只看X偏移、Y偏移、模糊、扩展这四个几何参数，四个都是0就不生成，颜色不参与判断。先把模糊或者偏移拉起来，阴影才会出现在代码里。

点了预设之后之前调的都没了怎么办？

预设是先重置全部83个控件再刷入这一组，不是叠加。正确顺序是先点预设再动手调。已经被清掉的没有撤销功能，只能重来。

左侧面板一片空白是什么原因？

整个界面由脚本运行时生成，脚本不执行就只剩空壳。先打开浏览器控制台看有没有报错，再强制刷新排除缓存拿到旧版本，最后换无痕窗口排除扩展程序冲突。前两步能解决大多数情况。

权威参考资料