我想通过其父级 div 元素实现带阴影的 iframe 元素的效果。
HTML
<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/zdOmNiXvM3w?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
CSS
div {
box-shadow:
inset 0px 11px 8px -10px black,
inset 0px -11px 8px -10px black;
}
以上是我目前所了解的内容,但无论在 CSS 中使用 z-index,iframe 似乎都具有优先权。 我在此示例中使用了 Youtube iframe,但此解决方案还需要使用标准 iframe,例如 one to google。 理想情况下仅使用 CSS/HTML。
最佳答案
iframe 将始终位于其父级的 box-shadow 之上。为了解决这个问题,您可以将 box-shadow 分配给绝对定位在父元素内的伪元素,并使其对指针事件不响应:
div {
position: relative;
}
div iframe {
display: block;
position: relative;
z-index: 1;
}
div::before {
background-color: rgba(255,255,255,.5); // Added only to show overlay, can be removed
content: '';
position: absolute;
z-index: 2;
box-shadow: inset 0px 11px 8px -10px black, inset 0px -11px 8px -10px black;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
我添加了略微透明的白色背景来显示叠加层。您可以随时将其删除。请在此处查看概念验证 fiddle :http://jsfiddle.net/teddyrised/uva5zkrg/
关于html - CSS:通过 iframe 上的父级 div 插入阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25474276/