使用 CSS 将图像舍入并定位

Question

我有一张像这样的图片：

我想对绿色部分应用圆形效果（我添加了黑色边框，以便您可以看到图像的样子），但正如您从下面的代码中看到的，它不会将绿色部分放在中心一侧它被砍掉了。

img {
    border-radius: 90px;
    -o-border-radius: 90px;
    -moz-border-radius: 90px;
    -webkit-border-radius: 90px;
}

<img src="https://i.stack.imgur.com/1PXL5.png">

我不确定我可以使用什么属性来达到所需的效果，或者我如何将它舍入以保持绿色部分位于中心。希望只使用CSS。

Answer 1

你可以这样做来清洁边缘以获得漂亮的外观：

#roundImg {
    border-radius:100% !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -khtml-border-radius: 100%;
     
    border:2px solid #C9C9C9;
    width: 90px;
    height:90px;
   
   overflow: hidden;
  
  
} #roundImg img {
         position :relative; 
         top:-18px;  right:55px;
         }

<div id="roundImg">
<img src="https://i.stack.imgur.com/1PXL5.png">
</div>

或者你可以弄乱（宽度和高度以及顶部和右侧）以显示锋利的边缘：

#roundImg {
    border-radius:100% !important;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -khtml-border-radius: 100%;
     
    border:2px solid #C9C9C9;
    width: 110px;
    height:110px;
   
   overflow: hidden;
  
  
} #roundImg img {
         position :relative;
         top:-8px;  right:44px;
         }

<div id="roundImg">
<img src="https://i.stack.imgur.com/1PXL5.png">
</div>