应重置textarea/input的outline和box-shadow：textarea:focus, input:focus { outline: none; }，textarea, input { box-shadow: none; }，并补border和背景色避免透明失焦；排查filter、全局focus样式及父容器阴影。
直接给 <textarea></textarea> 或 <input> 套在表格里时出现的“文本域阴影”，通常不是表格本身的问题，而是表单控件的默认 box-shadow 或 outline 被意外继承或未重置。消除它不靠改 table，而要精准定位到控件自身。
为什么表格里的文本框总有奇怪阴影？
常见错误现象：<td><textarea></textarea></td> 在 Chrome/Firefox 中 hover 或 focus 后突然出现蓝色/灰色外边框+微弱阴影；或者用某些 UI 框架（如 Bootstrap）后，textarea 自带 box-shadow: 0 0 0 0.2rem rgba(0,123,256,.25)。
- 浏览器对
textarea和input的:focus状态有默认outline（非box-shadow，但视觉像阴影） - 某些 CSS 重置库或框架会主动加
box-shadow到表单元素上，且未限定作用域 -
table本身不会给子元素加阴影，但若父级div.table-wrapper有box-shadow，又没设overflow: hidden，可能“漏”出边缘光晕
消除文本域阴影的三步实操
目标是让 textarea / input 在表格中彻底扁平、无焦点高亮、无多余投影。
- 重置
outline：textarea:focus, input:focus { outline: none; }—— 这是绝大多数“蓝边阴影”的根源 - 清空
box-shadow：textarea, input { box-shadow: none; }—— 注意必须写在足够具体的选择器下，避免被框架样式覆盖 - 补一层安全兜底：
textarea, input { border: 1px solid #d1d5db; background-color: #fff; }—— 避免清掉所有样式后变成“看不见的输入框”
表格内文本域阴影残留的排查点
如果按上面做了还是有阴影，大概率是以下某个地方漏了：
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
filter: drop-shadow()在包裹table的div上——它会把所有子元素（包括textarea）轮廓都投一遍影，不能只靠清box-shadow解决 - 确认没有全局样式如
*:focus { outline: 1px auto #007bff; }这类通配写法，它会强行复活outline - 若表格在模态框或卡片组件里，检查卡片类（如
.card）是否自带box-shadow，且textarea的z-index或position导致视觉叠加错觉 - 移动端 Safari 对
textarea:focus有强制高亮逻辑，仅靠outline: none不够，需加-webkit-appearance: none;和caret-color: #374151;辅助压制
真正难处理的不是阴影本身，而是它混在表格结构里时，你不知道该去哪层 DOM 上动刀——往往得顺着 DevTools 的 Computed 样式一层层往上翻，直到找到那个偷偷加了 box-shadow 或 outline 的祖先规则。
