html - 你能在视频元素上显示 CSS 框阴影(插图)吗

Question

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

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

代码片段:

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