Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

發(fā)布時間：2020-07-04 21:08:58 來源：網(wǎng)絡(luò) 閱讀：12641 作者：daydaydream 欄目：web開發(fā)

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

使用方法：
（1）Bootstrap庫的導(dǎo)入就不說啦，原圖如下（png,自帶一個小圓角，背景透明）：
Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

（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="頭像"/>

效果如下：

Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

(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;">

如下圖：
Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

繼續(xù)修正圓角，加入以下代碼:

<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;">

如下圖：
Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

向AI問一下細節(jié)

Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

Bootstrap中實現(xiàn)圓角、圓形頭像和響應(yīng)式圖片/css3圓角、圖片陰影效果總結(jié)