边界半径奇怪的轮廓

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 class，并添加填充。之后你也为图像制作 border-radius 。这只是我个人的选择，但我希望这对您有所帮助..

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>

边界半径奇怪的轮廓

border-radius strange outline

html

css

border