|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家介紹如何用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圖片如何加邊框的問題進行詳細的介紹，希望對有需要的朋友有所幫助。 以上就是鼠標移動到圖片上時，用css怎么實現圖片加邊框效果？的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
