Question

我正在试图找出执行以下操作的最佳方法：假设我有一个颜色为x的圆圈，我想在其中添加一个头像，我的目标是使头像图像也圆润，以使结果看起来更好。

我可以用php-gd做到这一点，但可能需要做很多计算（除非我错过了一些gd函数），是否有更好或更快的方法解决它，例如css？< / p>

TIA

Answer 1

如果我是你，我会使用CSS3来简化。下面将图像变成一个圆圈，并给它一个1px的圆形边框。

div.avatar{
    width:30px; height:30px; border:solid 1px #000;
    -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
}

div.avatar img{
    width:30px; height:30px;
    -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}

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

旧版本的IE

Answer 2

你最好使用一些CSS技巧来做到这一点。基本上你想设置一个位于图像上方的透明PNG，用它作为图像的掩模。例如check out this post about it。

我不建议在没有某种备份的情况下使用CSS3解决方案（border-radius），因为它的支持要少得多。但我想如果你只有现代支持你好，那么CSS3将是更好的选择。

Answer 3

最简单的方法是使用简单的CSS选择器：

<img class="avatar" src="" />

并在您的CSS文件中：

.avatar {
    border-radius: 50%;
}

是的，就这么简单。查看我的Codepen示例：http://codepen.io/usersnap/pen/udJgc

阿凡达麻烦圆角

3 个答案: