如何使边界半径更接近中心

Question

我想在圆形图像周围制作阴影，为此我使用了border-radius: 100px和box-shadow: 0 0 5px 5px #888;，但我想让它更深入到圆圈并移除那个白色一部分。

以下是它的外观截图。

＆＃13;

＆＃13;

.bubbles {
  border-radius: 100px;
  box-shadow: 0 0 5px 5px #888;
}

＆＃13;

<a href=""><img class="bubbles" src="https://img4.hostingpics.net/thumbs/mini_771288logomesure.png" alt="Heberger image" /></a>

＆＃13;

＆＃13;

＆＃13;

JSFiddle here

Answer 1

如果您无法更改图片并需要CSS解决方案。使用div并设置背景图片，而不是使用<img />标记。

＆＃13;

＆＃13;

.bubbles {
  width: 147px;
  height: 147px;
  border-radius: 100px;
  box-shadow: 0 0 5px 5px #888;
  background-image: url('https://img4.hostingpics.net/thumbs/mini_771288logomesure.png');
  background-origin: border-box;
  background-position: -10px -10px, center;
}

＆＃13;

<a href=""><div class="bubbles" /></a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你想要删除“白色部分”，这部分是图像周围的白色边框吗？

边框是由于您正在使用的图像的白色背景。我建议你直接编辑它（使用Gimp或Inkscape）来摆脱它。请参阅How to make a color transparent using Gimp以获得解释。

希望它会有所帮助！