Question

我在某些内容上使用了边框。但是，我发现不需要的1px轮廓颜色与在转换父级时在边框周围添加background颜色的颜色相同（至少使用scale和rotate）。这也发生在孩子的伪元素上

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

jsFiddle to work with

我已经在最新的Chrome和IE上测试了，问题出在

上

如何在不使用box-shadow或删除转换的情况下摆脱此大纲？

Answer 1

添加translateZ（1px）

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

（不确定为什么这样做......）

fiddle

似乎IE需要更多修复...

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

fiddle2

Answer 2

不是一个很好的解决方案，但添加backface-visibility: hidden;确定元素在离开屏幕时是否应该是可见的（通常在“翻转”和元素时使用），似乎至少可以修复它，至少在Chrome中。我没有在IE中测试的可能性。

我尝试它的原因是因为这个“黑客”已经解决了我之前遇到的类似问题。但我不确定它为什么会起作用......

jsFiddle

Answer 3

在Chrome中，您应该可以使用-webkit-backface-visibility: hidden;来解决此问题。我对IE不太确定，我现在没有任何东西可以测试。

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

转换父级时边框上的不需要的轮廓

3 个答案: