边界半径奇异轮廓

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上查看

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>