我试图通过在视频的左侧添加某种负边框并在顶部,右侧和底部应用边框,以使边框保持视频调整大小,以达到下一个结果。
是否有任何有效/好的方法来使用css / sass / html完成此操作?
.video {
width: 400px;
height: 225px;
background-color: red;
position: relative;
}
.video video {
position: absolute;
width: 100%;
max-height: 100%;
top: 10px;
right: 10px;
bottom: 20px;
}
<main>
<article>
<section>
<div class="video">
<video
controls="controls"
src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
</video>
</div>
</section>
</article>
</main>
提前致谢。
最佳答案
您可以使用多个box-shadow
(正确调整偏移量/颜色)
img {
box-shadow: 30px 0 0 0 #bbb, 30px -30px 0 0 #bbb, 30px 30px 0 0 #bbb;
}
或者,如果您想使用Sass
mixin
:@mixin rightshadow($offset, $colour) {
box-shadow: #{$offset}px 0 0 0 #{$colour},
#{$offset}px -#{$offset}px 0 0 #{$colour},
#{$offset}px #{$offset}px 0 0 #{$colour};
}
img {
@include rightshadow(25, #bbb);
}
Codepen demo
在我的示例中,我使用了图像,但是您当然可以将阴影应用于任何其他元素(即,在您的示例中,将阴影应用于包含视频的包装器)
结果