如何解决我在使用框阴影时,一条水平线出现在弹出图像的左侧,启用flex时会出现问题
单击拇指图像时,在弹出图像的左侧会出现一条水平线。发生这种情况是因为我在img css中添加了阴影。我正在练习使用flex,禁用flex时不会出现问题。 如何解决 需要帮助。
这是我的代码https://codepen.io/dedecodepen/pen/OJNbJQZ?editors=1100的codepen
{
font-family: Arial,Helvetica,sans-serif;
font-size: 50px;
text-align: center;
}
.container
{
margin: 0 auto;
width: 500px;
}
.gallery
{
width: 500px;
display: flex;
justify-content: space-evenly;
}
.gallery li
{
list-style: none;
}
.gallery li a
{
display: flex;
}
.overlay
{
display: flex;
justify-content: center;
position: fixed;
text-align: center;
padding: 110px;
width: 0;
height: 0;
overflow: hidden;
top: 0;
left: 0;
border-radius: 0 0 0 0;
background-color: rgba(0,0);
transition: 1s;
}
.overlay:target
{
width: auto;
height: auto;
bottom: 0;
right: 0;
background-color: rgba(0,.8);
}
.overlay .close
{
color: white;
font-size: 25px;
text-decoration: none;
}
.overlay img
{
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 2px 1px rgba(255,255,0.712);
}```
```<body>
<h1>Learn Flexbox</h1>
<div class="container">
<ul class="gallery">
<li>
<a href="#1">
<img src="https://i.ibb.co/sQG9gC0/1.jpg">
</a>
<div class="overlay" id="1">
<a href="#" class="close">X</a>
<img src="https://i.ibb.co/SQY8pvp/1.jpg">
</div> <!-- end overlay -->
</li>
<li>
<a href="#2">
<img src="https://i.ibb.co/tcFHXKx/2.jpg">
</a>
<div class="overlay" id="2">
<a href="#" class="close">X</a>
<img src="https://i.ibb.co/8zdgZHc/2.jpg">
</div> <!-- end overlay -->
</li>
<li>
<a href="#3">
<img src="https://i.ibb.co/K9BX0Lh/3.jpg">
</a>
<div class="overlay" id="3">
<a href="#" class="close">X</a>
<img src="https://i.ibb.co/3zH5Fcq/3.jpg">
</div> <!-- end overlay -->
</li>
<li>
<a href="#4">
<img src="https://i.ibb.co/dbkmm3G/4.jpg">
</a>
<div class="overlay" id="4">
<a href="#" class="close">X</a>
<img src="https://i.ibb.co/ky01729/4.jpg">
</div> <!-- end overlay -->
</li>
</ul>
</div><!-- end container -->
</body>```
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。