CSS 旋转的 div 边框显示奇怪的轮廓

Question

我正在尝试旋转带边框的 div。 边框与背景颜色相同。 边框轮廓和背景之间出现一条很细的线。 下面是我的代码。 我试图摆脱奇怪的线。

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); }

 <div></div>

我尝试了多种浏览器。

我可以通过使用另一个 div 而不是边框来解决这个问题，但我更感兴趣的是让边框按预期工作。

Answer 1

一个简单的解决方法是使用backface-visibility: hidden 。

当一个元素旋转时，看起来transform: rotate()的渲染可能会导致它的背面显示出来，就像在 3D 透视中一样。

在这种情况下，这可能会导致背面的background-color （元素正面的镜像）溢出边界边缘。

backface-visibility: hidden通过使背面不可见来修复它，如下例所示。

在旁注中， MDN确实提到backface-visibility对 2D 变换没有影响，这表明transform: rotate()具有透视的这种行为比预期的更偶然。

例子：

 body { background-color: black; display: flex; gap: 100px; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); } div + div { /* fixed here */ backface-visibility: hidden; }

 <div></div> <div></div>

Answer 2

这很有趣，因为它只出现在旋转变换中。 您可以使用 outline 将其移除以在带有边框的细线上绘制，这也不会影响它的定位，如下所示：

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); outline-offset:-1px; outline: 2px solid black; }

 <div></div>

Answer 3

仅限Firefox

我最好的猜测是浏览器图形函数中Z-axis的 3D 旋转存在舍入问题。 X-axis和Y-axis显示没有问题。 绘制的元素的大小似乎向下舍入（更小），而浏览器使用实际值或向上舍入的值进行计算。 不同之处在于元素background-color能够渗透的狭窄间隙。 我在片段中使用red来展示这一点。

当旋转不是0deg （通常是旋转的目的）时，transform transform: rotate(..)和transform: rotateZ(..)显示相同的问题。

要解决此问题（仅限 Firefox！！），请将transform-style: preserve-3d与正在旋转的元素一起使用。

 body { background-color: black; padding: 3rem; } div { width: 50px; height: 50px; background-color: red; border: 50px solid black; transform: rotate(45deg); }.test { transform-style: preserve-3d; /* voila. background colored border is gone..: */ margin-top; 4rem; /* create some distance */ }

 <div></div> <div class="test"></div>

Answer 4

像下面这样尝试，不需要边框，只需使用边距即可。

 body { background-color: black; } div{ width: 50px; height: 50px; background-color: white; transform: rotate(45deg); border: 0px; /* border: 50px solid black; */ margin: 50px; }

 <div></div>

Answer 5

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; transform: rotate(45deg); border: 0px; /* border: 50px solid black; */ margin: 50px; }

 <div></div>