你能让CSS盒阴影（内阴影）显示在视频元素上吗？

Question

你能让CSS盒阴影（内阴影）显示在视频元素上吗？

3

我给一个 <div> 添加了一个盒子阴影，并将一个 <video> 元素添加到该 div 中。盒子阴影显示在 div 上，但不会影响 video 元素。这是预期的行为吗？是否有方法使盒子阴影也影响视频？

.video-player {
    -webkit-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 103px 0px rgba(0,0,0,0.75);
}

<div class="video-player">
    <video width="100%">
        <source src="http://example.com/1wIsuB2" type="video/mp4" />
    </video>
    <h1>Test</h1>
</div>

这显然不是个大问题，但我觉得它很有趣。

编辑：JSFiddle 编辑2：这是针对内阴影的。

编辑3：可以在视频元素上显示内阴影。需要一个额外的元素。如果你想实现这一点，请参考@cport1给出的答案。

- Jones

1

你能给一个JSFiddle链接吗？ - Karmacoma

如果视频是Flash格式，您可能需要更改视频本身的透明度。请参见：http://www.aleosoft.com/flashtutorial_transparent.html - Diodeus - James MacFarlane

这个视频是mp4格式的。我已经添加了一个JSFiddle（http://jsfiddle.net/dbt6g5ra/）。 - Jones

3个回答

-1

video元素会延伸到视频的高度并停止。它应用了阴影，但你看不到它。如果你给video元素添加阴影和底部填充（例如30px），阴影就会出现。

编辑： 我想指出我完全忽略了OP想要一个内嵌阴影，OP已经编辑了标题以使这一点更清晰。

- Ian Devlin

我尝试为视频添加填充和阴影，但视频仍未受到阴影的影响。http://jsfiddle.net/gzcj7f7q/1/ - Jones

你的 jsfiddle 在 Firefox 中有阴影，你用的是什么浏览器？ - Ian Devlin

这是我书中一个例子的 box-shadow 示例，效果非常好：http://html5multimedia.com/code/ch6/css-rounded-corners-and-shadow.html - Ian Devlin

他要求在视频上方添加内阴影。 - cport1

我完全没有注意到他想要一个内嵌阴影，这只在代码中提到，而我不知何故没有看到。 - Ian Devlin

-3

只管做

.video-player {
    box-shadow: -1px 1px 5px #888;
}

- vmontanheiro

1

那似乎并没有做太多的事情。 - Jones

我在我的电脑上做了这个，效果很好。但是我把宽度改成了90%。拥抱。 - vmontanheiro

1

@Jones 请求插入盒子阴影。 - cport1

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cport1 · Accepted Answer

box-shadow是父元素的一部分，所以它会在视频下方呈现。一种替代方法是使用一个div将阴影放在视频上面，代码如下：

https://jsfiddle.net/dbt6g5ra/1/

<div class="video-player">
    <video class="vid" width="100%">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
    <h1>Test</h1>
    <div class="shadow"></div>
</div>


.video-player {
//styles
    
}
.shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 36px 36px rgba(0,0,0,0.75);
    top: 0;
    left: 0;
}