通过CSS创建圆角图像[重复]答案

【问题标题】：Create round corner image by CSS [duplicate]通过CSS创建圆角图像[重复]
【发布时间】：2015-07-14 20:33:45
【问题描述】：

我想创建像Skype的头像联系人一样的图像头像，你能帮我吗？我尝试使用边框radius-border但幸运

【问题讨论】：

我不明白你的问题。你可以添加你想要的草图吗？请添加您迄今为止尝试过的代码。请注意正确的语法是border-radius。
不是radius-border是border-radius
你是这个意思吗？ See demo here.
您可能想阅读Draw Circle using css alone

【解决方案1】：

我认为你也可以在img 标签上使用border-radius。

img{
    border-radius: 50%;
}

&lt;img src="https://c2.staticflickr.com/4/3016/3071708735_ddaf5d361b.jpg" alt=""&gt;

【讨论】：

你是对的 :)，已编辑后

【解决方案2】：

试试这样：Demo

div.avatar {
    border-radius:50%;
    overflow:hidden;
    width:100px;
    height:100px;
    border:1px solid #ccc;
}
div.avatar img {   
    height:100%;
}

HTML：

<div class="avatar">
    <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/5579090_orig.jpg" />
</div>

【讨论】：

【解决方案3】：

CSS：

.circleImage {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: green;
}

HTML:

&lt;div class="circleImage"&gt;&lt;/div&gt;

对于像 Skype 中的圆形图像，将边框半径保持为宽度或高度的一半。

【讨论】：

或仅使用 50% 作为您的声明。另请注意，边框半径属性不再需要前缀。 :)
.....将在边界半径编辑后投票（+1）;-)
删除了前缀并使其达到了 50%。 :) 谢谢你的建议。