Question

我为<div>添加了一个方框阴影，并在div中添加了<video>元素。框阴影显示在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://bit.ly/1wIsuB2" type="video/mp4" />
    </video>
    <h1>Test</h1>
</div>

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

编辑： JSFiddle

编辑2：这是针对插入阴影

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

Answer 1

box-shadow是父元素的一部分，因此它会在视频下方呈现。另一种方法是使用div来为视频添加阴影，如下所示：

http://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元素延伸到视频的高度并停止。它正在应用阴影，但你无法看到它。如果您将阴影和底部填充（例如30px）添加到video元素，则会出现阴影。

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

Answer 3

就这样做

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

你能在视频元素上显示css box shadow（inset）吗？

3 个答案: