你能在视频元素上显示 CSS 框阴影（插图）吗

Question

我在<div> 中添加了一个盒子阴影，并在 div 中添加了一个<video> 元素。 盒子阴影显示在 div 上，但不影响视频元素。

这是预期的行为吗？有没有办法让盒子阴影也影响视频？

代码 sn-p：

.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 给出的答案

Answer 1

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;
}

Answer 2

video 元素延伸到视频的高度并停止。它正在应用阴影，但您看不到它。如果您将阴影和底部填充（例如 30 像素）添加到 video 元素，则会出现阴影。

编辑： 我想指出，我完全错过了 OP 想要一个嵌入阴影，OP 已经编辑了标题以使其更清晰。

Answer 3

去做吧

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