用的浏览器是Chrome浏览器，后经测试，Edge浏览器就没事, 应该是Chrome浏览器的问题
transform: translate(-50%, -26%);
第二个参数当它是奇数的时候，div会出现下边框border，偶数的时候就不会出现下边框，
最近在梳理复习前端的基础知识，偶然发了一个不知道算不算bug还是浏览器特殊渲染方式的一个现象，自己没想明白，特记录在此，若有人清楚原因，还麻烦留言给我，多谢！
项目是这样的，div套娃，border-radius:50% 全做成圆形的，填彩虹七色，一个个重叠好，最外面套一个div，overflow: hidden设置好，就能出现彩虹形状
成品应该是这样的，为了看的清楚，最外面套的div设置了浅灰色背景
下面是我的发现：
注意看translate的第二个参数，奇偶性
发现，奇数的时候下面的边框就会出现，而偶数的时候就不会，很神奇！
现在附上我的源码供大家研究一下：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Document</title> <style> * { border: none; margin: 0; } body { background-color: white; width: 2300px; height: 2300px; } .container { height: 500px; width: 1300px; overflow: hidden; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -26%); background-color: lightgrey; } .red, .orange, .yellow, .green, .blue, .cyan, .purple, .blank { margin: 50px 50px 0px 50px; border-radius: 50%; overflow: hidden; } .red { width: 1200px; height: 1200px; background-color: red; } .orange { width: 1100px; height: 1100px; background-color: orange; } .yellow { width: 1000px; height: 1000px; background-color: yellow; } .green { width: 900px; height: 900px; background-color: green; } .blue { width: 800px; height: 800px; background-color: blue; } .cyan { width: 700px; height: 700px; background-color: cyan; } .purple { width: 600px; height: 600px; background-color: purple; } .blank { width: 500px; height: 500px; background-color: white; } </style></head><body> <div class="container"> <div class="red"> <div class="orange"> <div class="yellow"> <div class="green"> <div class="blue"> <div class="cyan"> <div class="purple"> <div class="blank"></div> </div> </div> </div> </div> </div> </div> </div> </div></body></html>