html - 有没有办法在 foreach 循环中使用 css 在图像周围动态绘制圆圈？ CSS HTML

Question

我有这些图片，想在它周围画圈

所以我想在这些图像周围画圈:

我预期的输出应该如下所示:

到目前为止，我已经有了带有 foreach 循环的代码

<div class="flex">
    <div style="margin-left: 8em"></div>
        <?php foreach($baby_charts as $chart): ?>
              <tr>
                 <th>
                    <div class="circle">
                       <a href="<?php echo base_url(); ?>charts/view/<?php echo $chart['id']; ?>/<?php echo $this->uri->segment(3); ?> ">
                        <img class="img-tooth" src="<?php echo base_url(); ?>assets/images/babyteeth/upper/<?php echo $chart['img_tooth'] ?>">
                       </a>
                     </div>
                 </th>
             </tr>          
    <?php endforeach; ?>
</div>

Answer 1

您可以通过以下样式实现此目的。我只是删除了您的 PHP 代码，因为它在这里不起作用。所以您也可以使用您的 PHP 代码，它会正常工作。

.circle{
  width: 60px;
  height: 60px;
  border: 2px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.circle a{
  display: inline-block;
}

.circle .img-tooth{
  max-width: 100%;
}

<div class="flex">
    <div style="margin-left: 8em"></div>
        
              <tr>
                 <th>
                    <div class="circle">
                       <a href="#">
                        <img class="img-tooth" src="https://placeimg.com/40/40/tech">
                        
                       </a>
                     </div>
                 </th>
             </tr>          
    
</div>