用的浏览器是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>