边界半径奇异轮廓

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>

View on JSFiddle

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>