溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、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;">
如下圖：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
