如何給縮略圖加上邊框等效果(2)_動易Cms教程
第一個圖片邊框的CSS代碼是:"border:thin solid red;"!癰order”后面的三個參數(shù)的含義是:
邊框線寬度:可以自定義像素寬度如1pt、5px、2cm等,也以選擇邊框線寬度的三個標準值:thin(細線)、medium(中粗線)和thick(粗線)。
邊框線的類型:邊框線的類型有九個確定值:
none:無邊框線。與任何指定的border-width值無關(guān)
dotted:由點組成的虛線。在MAC平臺上IE4 與WINDOWS和UNIX平臺上IE5.5 為點線,否則為實線
dashed:由短線組成的虛線。在MAC平臺上IE4 與WINDOWS和UNIX平臺上IE5.5 為虛線,否則為實線
solid:實線邊框
double:雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove:根據(jù)border-color的值畫3D凹槽狀的邊框
ridge:根據(jù)border-color的值畫3D脊狀(菱形)的邊框
inset:根據(jù)border-color的值畫3D凹邊,顏色較深
outset:根據(jù)border-color的值畫3D凸邊,顏色較淺
注重:假如系統(tǒng)不支持這些邊框的屬性值,那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都會被“solid”實線邊框代替。要使用該屬性,必須先設(shè)定對象的height或width屬性,或者設(shè)定position屬性為absolute。假如border-width不大于0,本屬性將失去作用。
邊框線的顏色:red(紅色),邊框線的顏色可以用十六進制的顏色代碼,如#00ffcc。
我們定義邊框,實際上就是設(shè)定這三個參數(shù)值。從上面可以看出,給圖片加邊框確實很簡單。
更多使用技巧提示:給一段文本加邊框,可把CSS加在〈P〉標記里;給幾段文本加邊框,先把那幾段文本用DIV標記括起來,再把CSS加在〈DIV〉標記里;若是要給一行文本加幾個不同的邊框,則需要把文本放在表格里,再把CSS分別加到〈TD〉標記里。
2、給圖片加不同寬度和顏色的邊框線
您也可以對圖片的每一條邊的屬性值定義不同的樣式。例:
代碼1: .pic1 { border-top: #ff0000 4px dotted; border-right: #ffcc33 3px solid; border-bottom: #3300FF 2px double; border-left: #cccccc 4px ridge; } |
效果預(yù)覽: |
相關(guān)動易Cms教程:
|