我正在对 HTML5 video
元素应用微妙的 CSS3 转换,但我在 Chrome 中的视频两侧出现了令人不快的僵硬边缘。
http://cl.ly/image/0v0m421N1J1U/Screen%20Shot%202012-07-16%20at%2021.57.37.png
我在互联网上四处寻找解决方案。有些人建议添加白色边框或框阴影来掩盖边缘,但我没有找到任何运气。我还尝试将 -webkit-backface-visibility
属性设置为隐藏。还有其他可能的解决方法吗?
最佳答案
我试了一下这个,我可以想出一个解决方案:
.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;
}
它只是视频顶部的一个伪元素,它有两个框阴影,一个插入,另一个开始。此解决方案仅在您的背景为纯色时才有效。
关于css - 在 Chrome 中使用 CSS3 转换的视频刚性边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11512496/