为什么我在 CSS 中的旋转 div 的边界周围有一个模糊的边界？

Question

我在 CSS Battle 上做这个挑战，并在旋转的 div object 周围得到一个非常薄的边框。 这是为什么？ 我怎样才能摆脱它？ 当我在网站上提交它时，它的分数也只有 98.somewhat %，所以这不仅仅是一个渲染问题。

 <div id="a"></div> <div id="b"></div> <div id="c"></div> <style> body { background: #222730; margin: 0; } div { position: absolute; background: #4CAAB3; top: 50%; left: 50%; transform: translate(-50%, -50%); } #a { width: 400px; height: 150px; } #b { z-index: 1; border: solid 50px #222730; width: 150px; height: 150px; transform: translate(-50%, -50%) rotate(45deg); } #c { z-index: 2; background: #393E46; border-radius: 25px; width: 50px; height: 50px; } </style>

Answer 1

您可以简化代码，如下所示：

 html { background: linear-gradient(#4CAAB3 0 0)center/100% 150px repeat-x /* the bar below the rotate square */ #222730 } body { width: 150px; height: 150px; margin: 25px auto; border: 50px solid #222730; /* the border */ background: #4CAAB3 padding-box /* the main color */ radial-gradient(1px, #393E46 24px, #0000 25px); /* the circle */ transform: rotate(45deg); }

Answer 2

它来自#b的background属性（继承自div ）。

只需将此属性设置更改为独占#a ：

 body { background: #222730; margin: 0; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #a { width: 400px; height: 150px; background: #4CAAB3; } #b { z-index: 1; border: solid 50px #222730; width: 150px; height: 150px; transform: translate(-50%, -50%) rotate(45deg); } #c { z-index: 2; background: #393E46; border-radius: 25px; width: 50px; height: 50px; }

 <div id="a"></div> <div id="b"></div> <div id="c"></div>