iFrame 上的嵌入框阴影（Google 日历）答案

【问题标题】：Inset Box Shadow on iFrame (Google Calendar)iFrame 上的嵌入框阴影（Google 日历）
【发布时间】：2025-11-22 16:20:05
【问题描述】：

我正在尝试在 Google 日历上放置一个嵌入框阴影，除非 z-index 为负数，否则它似乎无法显示出来。它显示，但随后用户无法单击/使用日历。我看了看：Add inset box-shadow on Google Maps element，但它的 z-index 设置为负数。我把所有东西都排成一行，直到我弄清楚所有东西。

<div style="box-shadow:inset 0 0 10px #000000; 
            -moz-box-shadow:inset 0 0 10px #000000; width: 900px;">

   <iframe src="https://www.google.com/calendar/embed?showTz=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23ccffff&amp;src=756r34h4d6aqhta6fmaqkijm9k%40group.calendar. google.com&amp;color=%23853104&amp;ctz=America%2FNew_York" style="border-width:0" width="900" height="600" scrolling="no"></iframe>
</div>

我可以看到它背后突然出现的影子。我尝试过双重包装，将样式放在 iframe 等中，但无法让它为我的生活工作。

【问题讨论】：

标签： google-maps iframe css insets

【解决方案1】：

需要使用相对定位和z-index属性。

试试看，祝你好运！

.the-div {
    position: relative;
    box-shadow: inset 0 0 10px #000;
}

.the-iframe {
    position: relative;
    z-index: -1;
}

随心所欲...内联 CSS 或外部，但使用上面的代码作为尊重的元素

【讨论】：

z-index of -1 隐藏 iframe
对。不幸的是，这是唯一的方法。- 抱歉！
那么..这行不通？因为iframe被隐藏了？你能做一个 JSFiddle 来证明这行得通吗？
我会解释的。 iFrame 未隐藏。它在div下，所以效果达到了，但是鼠标事件不起作用。你不需要 JSFiddle，如果你想自己做
每个人都喜欢小提琴。尤其是当在复杂网站中实施时，它不能立即工作。拥有一个孤立的环境来证明一项技术是有效的，对每个人都有帮助。