html - 边界半径奇怪的轮廓

Question

有什么解决方案可以从图像中去掉这个轮廓？

body {
  background: #000
}

.s {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 8px solid #FFF;
  overflow: hidden
}

.s img {
  width: 100%
}

<div class="s">
  <img src="https://i.imgur.com/v9f1nS2.jpg" />
</div>

在 JSFiddle 上查看

标签： htmlcssborder

Answer 1

不要使用边界实体来制作这样的东西。您应该半径 div 类，并添加填充。之后，您也为图像制作边框半径。这只是我个人的选择，但我希望这会有所帮助..

body {
	background:#000
}
.s {
	width:200px;
	height:200px;
	border-radius:50%;
	overflow:hidden;
  padding:20px;
  background:#fff;
}
.s img {
	width:100%;
  border-radius:50%;
}

<div class="s">
	<img src="https://i.imgur.com/v9f1nS2.jpg"/>
</div>