如何通過CSS的border屬性為圖片設定邊框效果

最後更新：2018-07-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如何為通過css為圖片設定一個邊框呢，HTML中是通過<img>標記的border屬性值，給圖片添加邊框的，css中是通過border屬性，為圖片設定各式各樣的邊框樣式，border-style定義邊框的樣式，如虛線、實線或點劃線等等。

HTML設定圖片的邊框

HTML中通過<img>標記的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>

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More