text-shadow必须加在上而非或,因后两者不渲染文字;浅色背景用0 1px 1px rgba(0,0,0,0.15),深色背景用0 -1px 1px rgba(255,255,255,0.3)。

text-shadow 必须加在 <th> 上,不是 <code><thead> 或 <code><tr> —— 后两者不渲染文字,加了也白加。
<h3>为什么<code>text-shadow写在<thead>里没效果
<p><code>text-shadow 只作用于实际绘制文本的元素。<thead> 和 <code><tr> 是容器节点,本身不输出任何字符;阴影只能附着在真正承载文字的 <code><th>(或 <code><td>)上。DevTools 里能看到样式声明存在,但 computed 值为空,就是这个原因。
<ul>
<li>常见错误:<code>thead { text-shadow: 0 1px 2px rgba(0,0,0,0.2); } → 完全无效
th { text-shadow: 0 1px 1px rgba(0,0,0,0.15); }
colspan 或嵌套 <span></span>,阴影仍要落在最外层 <th> 上,除非你明确想只给某段文字加效果
<h3>
<code>text-shadow参数怎么配才让表头“浮出来”不糊字
表头通常字号不大(14–16px)、背景色较浅,盲目套用标题参数会导致边缘发虚、可读性下降。关键不是加多厚,而是偏移方向+模糊尺度+颜色透明度三者匹配。
- 浅色背景(如
#f8f9fa):用向下轻偏移模拟自然光,text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); - 深色背景(如
#2c3e50):换浅色高光,text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.3); - 细字体(
font-weight: 300)慎用 >1px 的blur-radius,容易糊成一团 - 避免
text-shadow: 0 0 5px #000这类无偏移+高模糊写法——文字轮廓消失,只剩一团灰影
和:hover联动时最容易卡住的三个点
想悬停时增强表头辨识度,别只堆阴影强度,过渡节奏和协同变化更重要。
- 过渡必须加在
th上:th { transition: text-shadow 0.2s ease; } -
th:hover里只改text-shadow,别同时突变color—— 否则阴影会“跳”而不是平滑浮现 - 移动端没
:hover,要用:active或 JS 临时加 class 控制;iOS Safari 对叠加 >2 层阴影 + 高模糊值(>2px)滚动时可能掉帧
真正难的不是写对语法,而是每种背景色下都要手动调参:偏移方向是否贴合光照逻辑、模糊值是否在小字号下保持锐利、透明度是否足够让文字从背景里“浮出来”又不抢戏——这些没法靠一套通用值解决,得实机测、逐列调。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











