研究腾讯Qzone圆角头像CSS有感
最近一直在帮YelpClone做定制模板。
今天闲来无事上了QZONE看看，看到那些头像（他们叫portrait，不过我们平时做开发都叫avatar）圆角就像去解剖一下看看他的做法。
TX的前端还是挺牛的，大量运用了CSS Sprite，今天就说说他们圆角头像的做法吧。
研究过代码后发现他们圆角其实是一个图片：http://qzonestyle.tc.qq.com/ac/qzone_v5/skin_img/21/portrait_round.png
有兴趣的下载下来看看，嘿嘿，注意背景千万别是白色，不然你什么都看不到了。
如果你的背景是黑色的话，可以看到如下：
这个明显是想运用CSS Sprite技术做圆角的遮盖嘛。
我以前的做法是把四个角的图片单独弄下来，然后做成position:absolute; top:-1; left:-1; （左上），以此类推做出四个角，好处是能自动适应宽度。可以用四个图片，但也可以用CSS sprite整合成一张图片，不过这样一来好像很违背标准的感觉。于是感觉TX的遮蔽式圆角头像还不错。代码大概是这样的：
这里省时间和空间就不用标准方法写了，属性都强加在标签后面了，呵呵。
<div style="position:relative; width:100px; height:100px;"> <span style="background:url(portrait_round.png) 0 -181px; width:100px; height:100px; position:absolute"></span> <img src="red_concise/images/add-cart.gif" width="100" height="100" /> </div>
原来思路也差不多，遮蔽的部分是absolute浮在外层relative的DIV的上面。这招也不错，以后我再开发类似的东东会借鉴的，毕竟弄四个角挺麻烦的。