HTML编辑器怎么设置阴影效果？Box-shadow配置方法-html教程-PHP中文网

box-shadow参数顺序必须严格为h-offset v-offset blur-radius spread-radius color inset，错一位即完全不生效；阴影“看不见”常因overflow:hidden或border-radius裁切，多层阴影从左到右由远及近叠加。

html编辑器怎么设置阴影效果？box-shadow配置方法

box-shadow参数顺序写错就完全不生效

浏览器对box-shadow的参数顺序是硬性校验，错一位整条声明就被忽略——不是“效果不对”，而是压根不渲染。必须严格按h-offset v-offset blur-radius spread-radius color inset顺序写，前两个值（水平/垂直偏移）缺一不可。

常见翻车点：

把inset写在颜色前面，比如box-shadow: inset 0 0 8px #000，旧版 Safari 直接失效
漏单位，写成box-shadow: 2 2 4 rgba(0,0,0,0.2)，浏览器当无效值跳过
误把blur-radius和spread-radius位置互换，结果阴影又虚又胖还偏移

最稳的起步模板：box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1);——所有值带单位、顺序固定、负spread-radius防溢出。

阴影“看不见”大概率是被裁掉了

不是代码写错了，而是box-shadow的模糊部分撞上了父容器的overflow: hidden或自身border-radius边界。它默认不占布局空间，但会真实绘制在盒模型之外。

典型场景和解法：

圆角卡片加了border-radius但阴影还是方的？必须给同一元素也设border-radius，且父容器不能overflow: hidden——改用padding留白
img没阴影？它是inline元素，默认不渲染box-shadow，加display: block或inline-block
深色背景上阴影发灰隐形？rgba(0,0,0,0.2)对比度太低，换成rgba(255,255,255,0.1)或用@media (prefers-color-scheme: dark)切换

多层阴影叠加时顺序决定视觉层次

逗号分隔的多个阴影，**从左到右、由远及近**绘制：第一个在最底层，最后一个盖在最上面。这直接影响“浮起感”是否自然。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

实用组合：

卡片浮起+底部厚实感：box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.2);
按钮按下态（外抬升+内凹）：box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.05);

注意：每层参数必须完整，不能省略中间项（如0 0 #000, 0 4px 8px #333非法）；超过 3 层在低端 Android 或旧 Safari 上可能卡顿，滚动区域慎用。