我完成了这个只使用CSS和一个精灵图像。这适用于所有浏览器,不需要任何JavaScript。
通过将div设置为位置来包围视频:relative;您可以使用z-index和绝对定位在视频顶部的四个角落中放置四个div。然后将一个精灵背景图像放入四个角中的每一个角落,并用与背景颜色相同的颜色将边缘倒圆。基本上用角落的图像覆盖视频。
它的代码也位于如下:
video {
width: 100%;
height: auto;
}
.corner-frame {
width: 100%;
position: relative;
}
.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
width: 10px;
height: 10px;
position: absolute;
background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
z-index: 1;
}
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
我创建的精灵只有20像素X 20像素,只有大约轮10px的角落落。如果你想下载的Photoshop文件,并改变角色或增加尺寸,你可以在这里得到PSD文件:http://www.mediafire.com/?bt9j0vhsmzfm9ta