html5 img圆角,html5视频上的圆角

我完成了这个只使用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