html - 如何仅将边框半径应用于面部？

Question

您好，我有一些图像需要应用边框半径（将图像制作成圆形），但我只想做脸部。那么如何仅将边框半径应用于面部或仅图像的顶部？客户不想要太多的身体展示。

前

后

Answer 1

您最好的选择是在您喜欢的照片编辑器中裁剪照片。

如果您必须使用代码执行此操作，则需要更改图像在其容器中的位置，或者简单地将其用作 abackground-image并更改其background-position：

.img {
  width: 300px;
  height: 300px;
  background-image: url(https://i.stack.imgur.com/tiCHu.png);
  background-position: center top;
  border-radius: 50%;
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2)
}

<div class="img"></div>