使用transform: translate();使得ul里面的li周围出现一条细线

Question

老师，我在练习的过程中发现使用transform: translate(100px,50px);会使得ul里面的li周围出现一条细线，不知道这些细线是怎么来的

• 用户名
• 用户名
• 用户名

*{
margin:0;
padding:0;
}
.login{
width: 200px;
height: 150px;
background:red;
transform: translate(100px,50px);
ul{
li{
background:#fff;
height: 50px;
list-style: none;
}
}
}

Answer 1

TooooBug 2022-07-22 09:56:50

你把你的示例放到在线演示上，比如codepen或者codesandbox之类的。刚这一点代码看不出来问题。目前能大致猜想是因为背景是红色的，某些布局的原因导致背景被透出来了了。

• 提问者 qq_软九_0 #1

  看着确实像被透出来的，不知道有没有什么办法可以解决
  https://codepen.io/waini/pen/OJvgxKB

• TooooBug 回复 提问者 qq_软九_0 #2

  这个例子我看着是没有红色背景的……

• TooooBug 回复 提问者 qq_软九_0 #3

  是否浏览器有缩放？

点开查看后面1条评论

Answer 2

提问者 qq_软九_0 2022-07-16 07:34:28

我知道了，加了list-style: none;就没有了