我正在CSS Battle上进行此挑战，并在旋转的div对象周围得到了非常细的边框。这是为什么？我该如何摆脱呢？当我在网站上提交该书时，它的得分也仅为98.％，所以这不仅是渲染问题。
<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>它来自（继承自）的background属性。#bdiv
只需将此属性设置更改为独占#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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句