请问老师，为什么我的span里的圆圈是扁的

来源：2-4 轮播图上圆点按钮

森林sng

2020-07-25 17:47:45

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片轮播</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<div class="main">
		<div class="banner">
			<a href="">
				<div class="banner-slide slide1 slide-active"></div>
			</a>
			<a href="">
				<div class="banner-slide slide2"></div>
			</a>
			<a href="">
				<div class="banner-slide slide3"></div>
			</a>
		</div>
		<div class="button left"></div>
		<div class="button right"></div>
		<div class="dots">
			<span class="dot-active"></span>
			<span></span>
			<span></span>
		</div>
	</div>
</body>
</html>

*{
	margin:0px;
	padding:0px;
}
body{
	font-family:"微软雅黑";
	color:#14191e;
}
ul{
	list-style:none;
}
.main{
	width:1200px;
	height:460px;
	margin:30px auto;
	overflow:hidden;
	position:relative;
}
.banner{
	width:1200px;
	height:460px;
	overflow:hidden;
	position:relative;
}
.banner a .banner-slide{
	width:1200px;
	height:460px;
	background-repeat:no-repeat;
	float:left;
	display:none;
}
.banner a .slide-active{
	display:block;
}
.banner a .slide1{
	background-image:url(../image/bg1.jpg);
}
.banner a .slide2{
	background-image:url(../image/bg2.jpg);
}
.banner a .slide3{
	background-image:url(../image/bg3.jpg);
}
.main .button{
	background-image:url("../image/arrow.png");
	background-repeat: no-repeat;
	background-position: center center;
	width:40px;
	height:80px;
	position:absolute;
	left:224px;
	top:50%;
	margin-top:-40px;
}
.main .left{
	transform:rotate(180deg);
}
.main .right{
	left:auto;
	right:0px;
}
.main .button:hover{
	background-color:rgba(3,3,3,0.5);
	cursor: pointer;
}
.main .dots{
	position:absolute;
	right:0px;
	bottom:10px;
}
.main .dots span{
	width:10px;
	height:10px;
	margin-right:20px;
	border-radius:50%;
	background-color:#000;
	border:1px solid #fff;
}
dot-active{
	background-color:#000;
}