时间戳

首页 > 解决方案 > 如何在图像周围创建圆形边框？

html - 如何在图像周围创建圆形边框？

问题描述

我有一个图片库，所有图片的大小都相同。我正在尝试在图像周围添加彩色圆形边框，但是这样做有一些问题。

一方面，边框占据了盒子的整个宽度，而我只希望它比它周围的图像大一点。不仅如此，它甚至没有覆盖整个图像，只是在其中一部分周围形成了日食。我为此使用了随机图像，但所有其他图像都发生了同样的事情。

.galleryStyle {
  color: white;
  width: 100%;
  background: black;
}

.galleryContainer {
  height: 100%;
  margin: 10px;
  padding: 15px;
  border-radius: 100%;
  background: red;
}

.galleryGrid {
  display: grid;
  grid-template-columns: repeat(2, 3fr);
  padding: 5px;
  margin: 10px;
  height: 100%;
  width: 60%;
}

<body class="galleryStyle">
  <div class="galleryGrid">
    <div class="galleryContainer">
      <div>
        <a href="google.com">
          <img src="https://i.ytimg.com/vi/BY3PXd2zLT4/maxresdefault.jpg" alt="image1">
        </a>
      </div>
    </div>
  </div>

https://jsfiddle.net/5q9gxof4/1/

标签： htmlcss

解决方案

border-radius应该应用于img自身。

为此，您可以使用以下选择器选择 div 中的任何img标签galleryContainer，然后应用边框半径。

.galleryContainer img {
  border-radius: 50px;
}

然后您可以使用bordercss 规则在图像周围创建边框：

.galleryContainer img {
  border-radius: 50px;
  border: 10px solid red; # This create the border
}

推荐阅读