我正在创建一个网站，其中有几个框，人们可以单击以获取文章，现在我有两个框，但边框不会显示。 这是我的 HTML 代码
.box{
border-style: solid;
border-width: 5px;
border-color: black;
width: 200px;
height: 200px;
border-radius: 20px;
display: inline-block;
margin: 10px;
text-align: center;
box-shadow: 10px 10px 10px;
}
#nvidia2024{
display: flex;
flex-wrap: wrap;
justify-content: center;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blog</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../style.css">
<link rel="icon" type="image/png" href="../Images/Icon.png">
</head>
<section id="blogs">
<div class="box" id="nvidia2024">
<a href="nvidia2024.html"><img width="200" src="../Images/Nvidia-GPU-1.webp"></a>
<br>
<h3><big><a href="nvidia2024.html">Nvidia</a></big></h3>
</div>
<div class="box" id="placeholder">
<a href="nvidia2024.html"><img width="200" src="../Images/Nvidia-GPU-1.webp"></a>
<br>
<h3><big><a href="nvidia2024.html">Placeholder</a></big></h3>
</div>
</section>
</body>
</html>
我尝试过更改宽度、高度、边距等，但没有任何效果，我仍然只有两个图像及其标题，周围没有框。
body {
margin: 1em;
}
section {
display: flex;
gap: 1em;
}
.box {
width: 12em;
aspect-ratio: 1;
border: 5px solid black;
border-radius: 1em;
box-shadow: 2px 2px 10px rgb(0 0 0 / 0.5);
overflow: hidden;
position: relative;
}
.box img {
width: 100%;
height: 100%;
object-fit: cover;
}
.box span {
color: white;
position: absolute;
left: 0;
bottom: 0.5em;
right: 0;
z-index: 10;
text-align: center;
font-size: 1.5em;
text-shadow: 0 0 6px rgb(0 0 0 / 0.5);
}<section>
<a class="box" href="">
<img src="https://picsum.photos/500/400">
<span>Image 1</span>
</a>
<a class="box" href="">
<img src="https://picsum.photos/502/400">
<span>Image 2</span>
</a>
</section>