關鍵字：
border-radius 圓角實現
box-shadow 陰影實現
瀏覽器支持：
效果圖：
w3school在線測試工具 v1.2 http://www.w3school.com.cn/tiy/c.asp?f=css_border-radius&p=6
去試試 W3School在線測試工具 V2 http://www.w3school.com.cn/tiy/t.asp?f=css3_border-top-left-radius
本例開始效果，實現代碼：
1 <!-- 圓形頭像 --> 2 <div align="center"> 3 <img src="100.jpg" style="margin:10px auto;border-radius:50%"/> 4 <div> <img src="glass.jpg" style="margin:2px auto;border-radius:50%" /> </div> 5 <div> <img src="eat.jpg" style="margin:3px auto;border-radius:46%" /> </div> 6 <div> <img src="glass.jpg" style="margin:3px auto;border-radius:15%" /> </div> 7 <div> <img src="glass.jpg" style="margin:3px auto;border-radius:5%" /> </div> 8 </div>
參考：
http://www.divcss5.com/wenji/w732.shtml
CSS3 border-radius 屬性
http://www.w3school.com.cn/cssref/pr_border-radius.asp
CSS3 border-top-left-radius 屬性
http://www.w3school.com.cn/cssref/pr_border-top-left-radius.asp
border-radius
http://msdn.microsoft.com/zh-cn/library/gg721784(v=expression.40).aspx
http://www.cnblogs.com/rainman/archive/2011/06/21/2085800.html
http://www.cnblogs.com/lianjun/archive/2011/03/11/1981606.html
另外：
陰影效果：
實現代碼：
1 <div style="-webkit-box-shadow:5px 2px 6px #eee;-moz-box-shadow:5px 2px 6px #eee;padding:4px 10px;">陰影效果實現</div>
圓形 + 陰影效果:
實現代碼：
1 <div align="center">
2 <img src="100.jpg"
3 style="margin:3px auto;border-radius:50%;-webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #fff;padding:0px 0px;" />
4 <img src="100.jpg" style="margin:3px auto;border-radius:50%" />
5 </div>
參考：
box-shadow 在線手冊
http://www.php100.com/manual/css3_0/box-shadow.shtml
CSS3 border-radius
http://demo.doyoe.com/css3/border-radius/
CSS3 box-shadow
http://demo.doyoe.com/css3/box-shadow/
純CSS實現簡單的顯示隱藏效果
http://demo.doyoe.com/css3/switch/?
CSS+Div布局實現圓角表格邊框_源碼愛好者
http://www.codefans.net/jscss/code/4268.shtml
純CSS圓角邊框_源碼愛好者
http://www.codefans.net/jscss/code/381.shtml