css - 在 Chrome 中使用 CSS3 转换的视频上的刚性边缘

Question

我正在对 HTML5video元素应用一个微妙的 CSS3 转换，但我在 Chrome 中的视频两侧出现了令人不快的僵硬边缘。

http://cl.ly/image/0v0m421N1J1U/Screen%20Shot%202012-07-16%20at%2021.57.37.png

我在互联网上四处寻找解决方案。有些人建议添加白色边框或框阴影来掩盖边缘，但我没有找到运气。我也尝试将-webkit-backface-visibility属性设置为隐藏。还有其他可能的解决方法吗？

Answer 1

我玩了一下这个，我可以想出一个解决方案：

.wrapper {
  -webkit-transform: rotate(30deg) translate(100px,100px);
  position: relative;
  float: left
}

.wrapper:after {
 content: '';
 position: absolute;
 display: block;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff;

}

video {
  display: block;
}
​

它只是视频顶部的一个伪元素，它有两个盒子阴影，一个是插图，另一个是插图。此解决方案仅在您的背景为纯色时才有效。

http://jsfiddle.net/5SuGb/ ​</p>