使用变换后的边框图像之间的间隙：旋转

Question

我正在尝试创建一个带有锯齿状边缘的框，实际上可以将其用作HTML元素，并且可以调整大小等。

最后让我的头围绕着边框图像，让它看起来很漂亮，然后当我旋转它时，它会在边框图像和主要填充之间产生间隙：

我用谷歌搜索了一下，并找到了答案，告诉别人设置

-webkit-backface-visibility: hidden;

这清除了它，但显然只在webkit浏览器中。

我也尝试使用-moz-backface-visibility，但它没有在Firefox中解决问题。

有什么建议吗？

jsFiddle

e：我实际上认为我可以通过设置背景色来修复它，然后将background-clip设置为padding-box，但说实话它只是让我处于同一位置。

Answer 1

解决Webkit和FF问题的一个技巧是设置透视（而不是背面可见性）

.box.one {
    -webkit-transform: perspective(999px) rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    transform: perspective(999px) rotate(1deg);
}

fiddle

Answer 2

添加带有负边距的after伪类似乎可以解决Firefox问题。

.rough:after {
    content: "";
    display: block;
    margin: -1px;
    height: 302px;
    background: black;
}

小提琴演示：http://jsfiddle.net/Wkk7W/3/

请注意，display：block似乎是我的hack / fix的重要组成部分。

更新：根据您对内容内部 div的计划，该确切示例可能不适合。但是，我认为这个概念可以根据您的要求进行调整 - 例如使用3px宽的黑色边框而不是背景填充，并使用position：absolute来允许其他文本在框顶部分层。

Answer 3

要回答自己，因为这个解决方案实际上涵盖了我的需求，即“作为一个html元素应该是，并且可以调整大小等”，即使我从Grants答案中开发了这个解决方案。

http://jsfiddle.net/Wkk7W/6/

将元素设置为position:absolute，然后为其赋予伪元素：

content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;

这样它保持元素的宽度和高度，z-index：-1将它放在文本后面。它可能不需要显示：块，我没有检查。

仍然存在一些微小的差距，但它们基本上无法覆盖，我对此感到满意。