父级转换后,边框上不需要的轮廓 [英] 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;
}
我已经在最新的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);
}
这篇关于父级转换后,边框上不需要的轮廓的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!