css图片边框视频 |css宽的属性

.vid-container {
border: 5px solid #333333;
padding: 10px;
position: relative;
}
.vid-container img {
position: absolute;
top: -5px;
left: -5px;
bottom: -5px;
right: calc(50% + 5px);
border: 5px solid #333333;
}
.vid-container video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: calc(50% + 5px);
border: 5px solid #333333;
}

首先，在HTML文件中创建一个包含视频和图片的container div。然后，在CSS文件中为该div创建一个class，如.vid-container，并为其添加边框和内边距。这将在视频和图像周围创建一个空白区域。

接下来，为图片添加样式。为了将图像放置在视频的左侧，图片应该是相对定位的，使用absolute属性。然后，通过设置top，left，right和bottom属性来定义图像在容器中的位置和大小。最后，为图片添加边框样式，使其外观与容器类似。

对于视频，要实现类似的样式，但是需要将位置和大小属性调整一下，以便它紧挨着图像出现。还需要为视频添加边框，这样视频和容器之间的边界就不会有空白区域。

完成这些步骤后，视频应该可以显示其美丽的边框和图像组合。这是一种简单而有趣的CSS技巧，可以提高您网站的外观和吸引力。