我怎样才能给 divs can-pop 和 can-last 添加边框

Question

.migrid
    {   
        
        padding-top: 2%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        gap:2% 10%;
    }
    .migrid div
    {   
        padding-top: 2%;
        text-align: center;
    }
    .migrid .popular
    {   
        font-size: 2vw;
    }
    .migrid .reciente
    {   
        font-size: 2vw;
    }
    .migrid div i
    {   
        color: #01f2fe;
    }
    .migrid div img
    {   
        border-radius: 10px;
        padding: 0 0 0 2%;
        width:15%;
        float: left;
    }
    .migrid div a 
    {   
        font-size: 1.2vw;
        color: white;
    }

   <div class="migrid"> 
  <div class="popular"><i class="fas fa-headphones-alt"></i>  Popular</div>
  <div class="reciente"><i class="fas fa-microphone"></i>  Lo último</div>
  <div class="can-pop"><img src="assets/img/covers/cover1.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover2.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover3.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover4.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover5.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover6.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover7.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover8.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="assets/img/covers/cover9.jpg"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="assets/img/covers/cover10.jpg"><a>Nombre de la cancion</a></div>
</div>

我不知道如何给那个 div 添加边框

Answer 1

三个 CSS 属性对于创建边框特别有用：

这些组合在 border shorthand 属性中。本质上，您可以这样做：border: [border width] [border style] [border color].

如果你想给 <div> 本身添加边框，那么你可以简单地做：

.can-pop, .can-last {
  border: 1px solid black; /* Or whatever border you want. */
}

如果你想在 <div> 中给 <img> 个元素加边框，你可以这样做：

.can-pop img, .can-last img {
  border: 1px solid black; /* Or whatever border you want. */
}

（有关边框的教程，请参阅 here。）

请注意，以上是对边框的非常简化的解释。还可以做更多的事情，包括圆角和仅在某些边放置边框。

Answer 2

可能类似于以下代码段：

.migrid {   
  background: #1d6366;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 1em;
  row-gap: 1em;
  column-gap: 1em;
}
.can-pop, .can-last, .popular, .reciente {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1em;
  padding: 1em;
  border: 1px solid #01f2fe;
}
.popular, .reciente {
  font-size: 1.2em;
}
.migrid div i {   
  color: #01f2fe;
}
.migrid div img {   
  border-radius: 10px;
  width:15%;
}
.migrid div a {   
  font-size: 1em;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="migrid"> 
  <div class="popular"><i class="fas fa-headphones-alt"></i>  Popular</div>
  <div class="reciente"><i class="fas fa-microphone"></i>  Lo último</div>
  <div class="can-pop"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-pop"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
  <div class="can-last"><img src="https://picsum.photos/200"><a>Nombre de la cancion</a></div>
</div>

我怎样才能给 divs can-pop 和 can-last 添加边框

How can i put a border to the divs can-pop and can-last

html

css

grid