div中的负左边框，里面有视频？

Question

我正在尝试通过在视频左侧添加一个负边框并在顶部，右侧和底部应用边框来实现下一个结果，以便边框保持视频大小调整。

使用css / sass / html有没有任何有效/好的方法来实现这一目标？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

提前致谢。

Answer 1

您可以使用多个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

在我的例子中，我使用了一个图像，但当然你可以将阴影应用于任何其他元素（例如，在你的例子中，包含视频的包装器）

<强>结果