gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:01:05 24 4
gpt4 key购买 nike

我正在对 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;
}

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

http://jsfiddle.net/5SuGb/

关于css - 在 Chrome 中使用 CSS3 转换的视频刚性边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11512496/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com