父级转换后，边框上不需要的轮廓 [英] Unwanted outline on border when parent is transformed

问题描述

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

I am using borders on some content. However, I am finding an unwanted 1px outline the same color as the background color is being added around the border when the parent is transformed (at least with scale and rotate). This occurs on pseudo-elements of the children as well

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

jsFiddle与之一起使用

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

I have tested on the newest Chrome and IE, the problem is on both

如何在不使用box-shadow或删除转换的情况下摆脱此轮廓?

How can I get rid of this outline without using box-shadow or removing the transform?

推荐答案

添加一个translateZ(1px)

Add a translateZ(1px)

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

(不太确定为什么会这样工作...)

(not really sure why does this work ...)

小提琴

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

Seems that IE needs more fixing...

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

fiddle2

这篇关于父级转换后，边框上不需要的轮廓的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！