父元素进行变换时边框出现意外的轮廓线

Question

我在某些内容上使用边框。但是，当父元素进行变换（至少是通过 scale 和 rotate）时，发现一个不想要的与 background 颜色相同的 1px 轮廓会围绕着边框添加。这也会发生在子元素的伪元素上。

.container { 
    transform:rotate(-45deg); 
}
.child {
    border:3px solid white; background:green;
}

jsFiddle 与之配合使用

我已经在最新的Chrome和IE上进行了测试，两者都有这个问题。

我该如何在不使用box-shadow或删除变换的情况下摆脱这个轮廓？

- Zach Saucier

Answer 1

添加一个translateZ(1px)

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:rotate(-45deg); 
}

（真的不太清楚这为什么有效...）

示例

看起来IE需要更多的修复...

.container { 
    position:absolute; 
    top:50%; left:50%; 
    -webkit-transform:translateZ(1px) rotate(-45deg); 
    transform:perspective(999px) translateZ(1px) rotate(-45deg); 
}

fiddle2

（翻译：使用HTML标签的方式展示一个链接，该链接指向名为“fiddle2”的网页）

- vals

---

所有这些技巧（包括其他答案中的背面可见性）都以类似的方式工作，通过在图形引擎中引入更精确的渲染（有时由GPU渲染）来实现。但无论如何，这总是一个试错的过程。通常的技巧是强制进行3D变换（有时只需要translateZ（0px）），设置透视图，并将背面可见性设置为隐藏。 - vals

Answer 2

并不是最好的解决办法，但添加backface-visibility: hidden;可以解决类似的问题。当元素面向屏幕背面时，该属性确定元素是否可见，通常用于"翻转"元素，至少在Chrome浏览器中有效。我没有测试它在IE浏览器中是否有效。我尝试使用这种"hack"的原因是因为它已经解决了我以前遇到的类似问题。但是我并不确切知道它为什么有效... jsFiddle

- Christofer Vilander

Answer 3

在Chrome中，您应该能够使用-webkit-backface-visibility: hidden;来解决这个问题。我不太确定IE，因为我现在没有任何测试工具。

http://jsfiddle.net/ayFbD/4/

- Blake Mann