如何透過CSS的border屬性為圖片設定邊框效果
- 不言原創
- 2018-07-16 16:34:235668瀏覽
如何為透過css為圖片設定一個邊框呢，HTML中是透過a1f02c36ba31691bcfe87b2722de723b標記的border屬性值，為圖片加上邊框的，css中是透過border屬性，為圖片設定各式各樣的邊框樣式，border-style定義邊框的樣式，如虛線、實線或點劃線等等。
HTML設定圖片的邊框
HTML中透過a1f02c36ba31691bcfe87b2722de723b標記的border屬性值，為圖片新增邊框，從而控制邊框的粗細，當該值為0時，表示沒有邊框。
<span style="font-size:24px;"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="1"> <img src="scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="2"> </span>
程式碼如上，可以看到所有邊框都是黑色，而且風格非常單一，都是實線，僅僅是邊框的粗細可以進行調整。
CSS設定圖片的邊框
在Dreamweaver中透過語法提示，可以輕鬆地獲得各種邊框樣式的值。
可以透過border-color定義邊框的顏色，border-width定義邊框的粗細。
<html>
<span style="font-size:24px;">
<head>
<title>
边框
</title>
<style>
<!--
img.test1{
border-style:dotted;
border-color:#FF9900;
border-width:5px;
}
img.test2{
border-style:dashed;
border-color:blue;
border-width:2px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" class="test2">
</body>
</span>
</html>程式碼如上，第一張圖片的效果為金黃色、5像素寬的點劃線，第二張圖片為藍色、2像素寬的虛線。
在CSS中可以分別設定4個邊框的不同樣式，分別設定為border-left、border-right、border-top、border-bottom的樣式。
<html>
<span style="font-size:24px;">
<head>
<title>
分别设置4个边框
</title>
<style>
<!--
img{
border-left-style:dotted;
border-left-color:#FF9900;
border-left-width:5px;
border-right-style:dashed;
border-right-clolr:#33CC33;
border-right-width:2px;
border-top-style:solid;
border-top-color:#CC00FF;
border-top-width:10xp;
border-bottom-style:groove;
border-bottom-color:#666666;
border-bottom-width:15px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"">
</body>
</span>
</html>程式碼如上，為圖片的四個邊框分別設定了不同的風格樣式，這種方法在許多其他HTML元素中也經常使用。
Border屬性，也可以將各個值寫到同一語句中，用空格分隔，這樣可以大大的減少程式碼的長度。
<html>
<span style="font-size:24px;">
<head>
<title>
合并各CSS值
</title>
<style>
<!--
img.test1{
border:5px double #FF00FF;
}
img.test2{
border-right:5px double #FF00FF;
border-left:8px solid #0033FF;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test2">
</body>
</span>
</html>這樣，可以加快網頁的下載速度，更清晰易讀。
此外，除了border屬性可以將各個屬性值寫到一起，CSS的許多其他屬性也可以進行類似的操作，例如，font，margin及padding等屬性都可以統一。
<span style="font-size:24px;">
p{
font:italic bold 30px Arial,Helvetica,sans-serif;
padding:0px 5px 0px 3px;
}
</span>相關建議：
實作css虛線樣式的兩種方式：dotted與dashed（實例）
以上是如何透過CSS的border屬性為圖片設定邊框效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！