文字变糊不是dialog问题，而是filter: blur()误用或backdrop-filter缺失必要条件所致；需确保父容器有背景、dialog设半透背景、加-webkit前缀并避免transform干扰。
dialog里文字变糊，不是dialog的问题，是backdrop-filter用错了
文字模糊根本不是dialog本身导致的，而是你给它加了filter: blur()或误用了backdrop-filter的上下文。原生dialog默认不带任何模糊效果；一旦文字糊了，99%是CSS写法越界了。
别对dialog元素本身用filter: blur()
filter: blur()会把整个元素（含文字、按钮、子节点）当一张图来处理，必然糊掉内容。这不是“背景模糊”，是整块盒子被降质渲染。
-
filter作用于当前元素及其所有后代——文字天然在其中，无法幸免 - 想救文字只能拆DOM层级，比如把文字包进另一个
div再设filter: none，但破坏语义、增加维护成本 - 真正需要的是只模糊背后内容，文字保持锐利：这必须用
backdrop-filter，且只对有“透出背景”的元素生效
backdrop-filter生效的三个硬性条件
backdrop-filter不是设上就起效的属性，漏掉任一条件都会白屏、无模糊、或文字连带变糊。
- 父容器必须有可被模糊的内容：比如
body或外层section设置了background-image或background-color -
dialog自身必须带半透明背景：background-color: rgba(255,255,255,0.7)；纯色（rgb()）或transparent会挡住背后画面，模糊失效 - 必须加
-webkit-backdrop-filter前缀：Safari 15.4+才支持无前缀版本，Chrome/Firefox也建议保留前缀保底 - 强烈建议加
border-radius或overflow: hidden：否则模糊边缘在Safari中容易溢出、发灰
dialog居中样式干扰backdrop-filter导致文字错位模糊
很多开发者用position: absolute + transform: translate(-50%, -50%)手动居中dialog，但若父容器有transform、will-change或overflow: hidden，会导致backdrop-filter的渲染上下文异常——背后内容错位，模糊区域偏移，文字看起来像“虚焦”。
- 解决办法：确保
dialog是body直接子元素，避免嵌套在任意有CSS变换的容器里 - 居中改用
position: fixed+top: 50%+left: 50%+transform: translate(-50%, -50%)，脱离父级变换影响 - 测试时打开DevTools，检查
dialog的computed styles，确认backdrop-filter未被标记为invalid或disabled
dialog的缺陷，而是backdrop-filter的渲染依赖被悄悄破坏了——DOM结构、父级样式、透明度设置、前缀缺失，任何一个环节断掉，都会让模糊“失控”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
