圆点在网页上的显示感觉有点怪怪的

-----------------------------html-----------------------------

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/myStyle.css">
</head>
<body>
<div class="main" id="main">

  <div class="banner" id="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>
  <a href="javascript:void(0)" class="button prev" id="prev"></a>
  <a href="javascript:void(0)" class="button next" id="next"></a>
  <div class="dots" id="dots">
   <span class="active"></span>
   <span></span>
   <span></span>
  </div>
</div>

</body>
</html>

-------------------------------------css-------------------------------------

body{
font-family:"微软雅黑";
color: #14191e;
}

.main{
width:1200px;
height:460px;
margin:30px auto;
position:relative;
overflow:hidden;
}

.banner{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}

.banner-slide{
width:1200px;
height:460px;
background-repeat:no-repeat;
float:left;
display:none;
}

.slide-active{
display:block;
}

.slide1{
background-image:url(../img/bg1.jpg);
}

.slide2{
background-image:url(../img/bg2.jpg);
}

.slide3{
background-image:url(../img/bg3.jpg);
}
.button{
position:absolute;
transform: rotate(180deg);
top: 50%;
margin-top: -40px;
left: 244px;
height: 80px;
width: 40px;
background:url(../img/arrow.png) center center no-repeat;
}
.next{
transform: rotate(0deg);
left: auto;
right: 0px;
}
.button:hover{
background-color: #333;
opacity: 0.8;
filter: alpha(opacity=80);
}
.dots {
position: absolute;
bottom: 24px;
right: 0;
text-align: right;
padding-right: 24px;
line-height: 12px;
}

.dots span {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 8px;
background-color: rgba(7, 17, 27, 0.4);
cursor: pointer;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
}

.dots span.active{
box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;
background-color: #ffffff;
}

慕容9569281 2019-08-27

源自：项目：JavaScript轮播图 2-4 轮播图上圆点按钮

收起

2回答

好帮手慕小班回答被采纳获得+3积分 2019-08-27 17:33:30

同学你好，这里老师复制运行贴出代码，在Chrome浏览器中运行效果如下：

请问同学是觉得哪里怪呐，还请具体描述一下。

如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

收起回答

慕容9569281 提问者 #1

老师你看我的那张图，小白点外边缘有点模糊

2019-08-28 15:55:05
好帮手慕小班回复提问者慕容9569281 #2

同学你好，这里边缘有点模糊是因为在span.active的样式中有box-shadow这个属性样式，向边框添加阴影的效果呐，这是正常的哦。如果我的回答解决了你的疑惑，请采纳，祝学习愉快~

2019-08-28 17:02:27