小编Joe*_*Joe的帖子

CSS:通过在iframe上显示div来嵌入阴影

我想通过其父级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;
}
Run Code Online (Sandbox Code Playgroud)

以上是我到目前为止所得到的,但无论在CSS中使用z-index,iframe似乎都占优势.我在这个例子中使用了Youtube iframe,但是这个解决方案还需要使用标准的iframe,例如google.理想情况下只使用CSS/HTML.

html css iframe css3

3
推荐指数
1
解决办法
6841
查看次数

标签 统计

css ×1

css3 ×1

html ×1

iframe ×1