iframe默认边框需用border:none和outline:none清除，否则影响box-shadow效果；box-shadow生效需确保iframe参与盒模型渲染且未被父容器overflow:hidden裁剪，跨域iframe阴影正常但需注意视觉适配。
iframe 默认边框怎么去掉
iframe 在多数浏览器里自带 border（通常是 2px 灰色实线），不显式重置就会干扰阴影效果。必须先清掉它，否则 box-shadow 会叠在边框上，看起来发虚或偏移。
最稳妥写法是同时覆盖 border 和 outline：
iframe {
border: none;
outline: none;
}
- 只写
border: 0不够，某些旧版 Safari 仍可能渲染默认边框 -
outline: none防止聚焦时出现额外轮廓（比如用 Tab 键切换焦点） - 别依赖
frameborder="0"属性——HTML5 已废弃，且不能覆盖 CSS 的border
给 iframe 加 box-shadow 的关键条件
box-shadow 能生效的前提是 iframe 元素本身参与盒模型渲染，且没有被其他样式（比如 overflow: hidden 父容器）裁剪掉阴影区域。
常见失效场景和对应处理：
立即学习“前端免费学习笔记（深入）”；
- 父容器设了
overflow: hidden→ 阴影被直接截断，需改用overflow: visible或给父容器留足够padding - iframe 设了
display: block以外的值（如inline）→ 阴影可能错位，强制加display: block - 用了
transform（如缩放、平移）→ 某些浏览器会触发层叠上下文，导致阴影被“压”在底层，可加will-change: transform或临时用z-index调整
基础阴影写法示例：
iframe {
border: none;
outline: none;
display: block;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
阴影在跨域 iframe 上的表现差异
跨域 iframe（即 src 指向不同协议/域名/端口）的内容无法被父页面 JS 访问，但 CSS 样式依然可以作用于 iframe 元素自身——box-shadow 不受影响。
真正要注意的是视觉一致性问题：
- 如果 iframe 内容背景是白色，而父页是浅灰，阴影可能显得过重 → 改用更透明的
rgba(0,0,0,0.08) - 移动端 Safari 对跨域 iframe 的
box-shadow渲染有轻微模糊，可加-webkit-backface-visibility: hidden提升清晰度 - 某些企业内网环境禁用 iframe 阴影硬件加速，此时
box-shadow可能卡顿，建议避免大范围扩散值（如0 0 30px）
替代方案：用伪元素模拟阴影（兼容性兜底）
极老浏览器（如 IE9）不支持 box-shadow，或者遇到 iframe 被强制嵌入第三方 SDK（无法改其外层 HTML 结构）时，可用包裹容器 + 伪元素方式模拟：
<div class="iframe-wrapper"> <iframe src="..."></iframe> </div>
.iframe-wrapper {
position: relative;
display: inline-block;
}
.iframe-wrapper::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: -4px;
bottom: -4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: -1;
}
这个方法绕开了 iframe 自身样式限制，但需要确保父容器允许定位和溢出显示。
真正麻烦的是 iframe 内容动态改变高度时，伪元素阴影位置不会自动跟随——这时候就得用 JS 监听 load 和 resize 事件去重算尺寸，反而得不偿失。
