本篇文章給大家介紹如何用css給圖片加邊框,那麼在建設網站時,css圖片加邊框的特效一般是為了突出產品圖或者指向圖,這樣也有機率讓使用者湧起想要點擊的慾望。其實就css圖片如何加邊框的問題,在網上隨便一搜也能出現很多解決方案。但是今天我給大家用最簡單的代碼示範css加邊框的方法。希望對感興趣的朋友有所協助。
css圖片加邊框具體程式碼範例如下:
<!DOCTYPE HTML><html><head> <title>css圖片加邊框代碼測試</title> <meta charset="UTF-8"> <style type="text/css"> body{background: #ffffff;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:70px;height:70px;} img:hover{border:1px red solid;} .demo2 img{border:1px solid transparent;} .demo2 img:hover{border:1px red solid;} .demo3 img:hover{width:68px;height:68px;border:1px solid yellow;} </style></head><body><div> <img src="1.png" /> <img src="1.png" /> <img src="1.png" /> <img src="1.png" /> <em>這裡可以明顯看到當img標籤在hover的時候由於出現邊框導致位移</em></div><div> <img src="2.png" /> <img src="2.png" /> <img src="2.png" /> <img src="2.png" /> <em>在這裡給每個img添加border:1px solid transparent;</em></div><div> <img src="1.png" /> <img src="1.png" /> <img src="1.png" /> <img src="1.png" /> <em>在這裡修改width和height</em></div></body></html>
以上代碼測試效果如:
註::hover 選取器用於選擇滑鼠指標浮動在上面的元素。
提示::hover 選取器可用於所有元素,不只是連結。
提示::link 選取器設定指向未被訪問頁面的連結的樣式,:visited 選取器用於設定指向已被訪問的頁面的連結,:active 選取器用於活動連結。
注釋:在 CSS 定義中,:hover 必須位於 :link 和 :visited 之後(如果存在的話),這樣樣式才會生效。
本篇文章就css圖片如何加邊框的問題進行詳細的介紹,希望對有需要的朋友有所協助。