HTML 视频框距离边界,javascript – Chrome中的HTML5视频边框半径不起作用

引用

another post：

There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, 07001 or 07002.

如果将border-radius应用于包围视频的元素,并添加-webkit-mask-image,则可以在Chrome中完成.这是一个掩盖透明png并剪辑视频角落的演示：

更新：我将HTML / CSS更改为仅使用一个包装元素,并且它(至少)可以在IE9,FF和Chrome上运行.

CSS：

div.outer {

float: left;

height: 240px;

}

div.outer video {

width: 320px;

height: 100%;

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

border-radius: 32px 0 32px 0;

}

HTML：