我试图通过在视频的左侧添加某种负边框并在顶部,右侧和底部应用边框,以使边框保持视频调整大小,以达到下一个结果。

html - 带有视频的div中的负左边框?-LMLPHP



是否有任何有效/好的方法来使用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


在我的示例中,我使用了图像,但是您当然可以将阴影应用于任何其他元素(即,在您的示例中,将阴影应用于包含视频的包装器)



结果

html - 带有视频的div中的负左边框?-LMLPHP

07-24 09:49
查看更多