html+css圆形图片

先上效果图：

<!--           图一：border-radius牛刀小试，只出圆角，不求圆形        -->

<img style="margin-top: 100px;idth:200px;height:200px;border-radius:20px;" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>  

<!--           图二：border-radius圆形图片：以固定值设定，太死板       -->
<img style="margin-top: 100px;width:200px;height:200px;border-radius:200px;" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>  

<!--           图三：border-radius圆形图片：以百分比设定，比较通用，但前提是：图片必须是正方形的       -->
<img style="width:200px;height:200px;border-radius:50%;" src="http://b.hiphotos.baidu.com/image/pic/item/b999a9014c086e069cd7964b00087bf40ad1cbb7.jpg"/>