Bootstrap中實現圓角、圓形頭像和響應式圖片/css3圓角、圖片陰影效果總結

一、Bootstrap提供了四種用於<img>類的樣式，分別是：
.img-rounded：圓角 (IE8 不支持)，添加 border-radius:6px 來得到圖片圓角
.img-circle：圓形 (IE8 不支持)，添加 border-radius:50% 來讓整個圖片變成圓形
.img-thumbnail：縮略圖功能，添加一些內邊距（padding）和一個灰色的邊框
.img-responsive：圖片響應式 (自適應各種大小的屏幕)

使用方法：
（1）Bootstrap庫的導入就不說啦，原圖以下（png,自帶一個小圓角，背景透明）：

（2）將類樣式直接添加到class中便可：

<img class="img-rounded image-responsive" src="img.jpg" alt="頭像"/>
<img class="img-circle image-responsive" src="img.jpg" alt="頭像"/>
<img class="img-thumbnail image-responsive" src="img.jpg" alt="頭像"/>

效果以下：

(3)以圓角爲例，加陰影效果對比一下：
加入如下代碼：

<img src="csscool/img/01.png" alt="..." class="img-rounded img-responsive center-block" style="background-color: transparent;box-shadow:0px 0px 8px 5px #ccc;">

以下圖：

繼續修正圓角，加入如下代碼:

<img src="csscool/img/01.png" alt="..." class="img-rounded img-responsive center-block" style="border-radius:15px;background-color: transparent;box-shadow:0px 0px 8px 5px #ccc;">

以下圖：