阿凡達麻煩圓角

Question

我正在嘗試找出執行以下操作的最佳方法：假設我有一個顏色為x的圓圈要放置化身，我的目標是也使化身圖像變圓以產生結果看起來好多了。

我可以用php-gd來做到這一點，但可能需要做很多計算（除非我錯過了某些gd函數），有沒有更好或更快速的方法來解決它，例如CSS？

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的舊版本不支持CSS3

Answer 2

最簡單的方法是使用簡單的CSS選擇器：

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

並在您的CSS文件中：

.avatar {
    border-radius: 50%;
}

是的，就是這么簡單。 看看我的Codepen示例： http ://codepen.io/usersnap/pen/udJgc

Answer 3

實際上，您最好使用一些CSS技巧來做到這一點。 基本上，您想設置一個位於圖像上方的透明PNG，並將其用作圖像的蒙版。 例如， 查看有關此帖子 。

我不建議您在沒有某種備份的情況下使用CSS3解決方案（邊界半徑），因為它的支持要少得多。 但是我想如果您只接受現代支持就可以了，那么CSS3將是更好的選擇。