如何給縮略圖加上邊框等效果

如何給縮略圖加上邊框等效果

作者：雅虎　文章來源：本站原創　點擊數：<script language="javascript" src="/Help/GetHits.asp?ArticleID=414" type="text/javascript"> </script> 2800　更新時間：2005-5-31　

　　在《動易網站管理系統》中，對各個頻道的圖片類標籤所調用並顯示的圖片，增加了.pic1、.pic2、.pic3和.pic5這幾個CSS樣式定義，分別對應文章頻道、下載頻道、圖片頻道和商城頻道調用並顯示的圖片進行樣式控制。也就是說，您只要在後臺“網站風格管理”中，加上以上這些定義，就能控制所調用的圖片的樣式，包括統一大小、圖片邊框、投影效果等CSS樣式。以下詳細說明定義及樣式。

一、添加定義

　　進入系統後臺，在“系統設置”->“網站風格管理”中，單擊風格管理界面中的“修改風格”。在“風格管理界面”中，添加以下CSS樣式定義：
/* ==自選風格中的CSS定義結束== */
.pic1
{
***;***;
}
.pic2
{
***;***;
}
……
　　其中***部分即爲您所要定義的CSS樣式語句。

二、border樣式定義說明

1、給圖片加統一粗細的邊框

　　CSS的樣式定義中有一個屬性“border”（邊框），它可以給能確定範圍的HTML標記（如TD、DIV等等）畫邊框，它可以定義邊框線的類型、寬度和顏色，利用這個特性，可以製作一些特殊效果。下面將通過實例來說明其應用技巧。例：

代碼： .pic1 { border: 1px solid #cccccc; }

效果預覽：

　　上面的示例中，給圖片加上了邊框，邊框線的顏色、粗細是可變的。例：

border: 1px solid red;	border: 2px dotted #cccccc;	border: 2px dashed #cccccc;	border: 3px double #cccccc;
border: 4px groove #cccccc;	border: 4px ridge #cccccc;	border: 4px inset #cccccc;	border: 4px outset #cccccc;

　　第一個圖片邊框的CSS代碼是："border:thin solid red;"。“border”後面的三個參數的含義是：
　　邊框線寬度：可以自定義像素寬度如1pt、5px、2cm等，也以選擇邊框線寬度的三個標準值：thin（細線）、medium（中粗線）和thick（粗線）。
　　邊框線的類型：邊框線的類型有九個確定值：
　　none:無邊框線。與任何指定的border-width值無關
　　dotted:由點組成的虛線。在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲點線，否則爲實線
　　dashed:由短線組成的虛線。在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+爲虛線，否則爲實線
　　solid:實線邊框
　　double:雙線邊框。兩條單線與其間隔的和等於指定的border-width值
　　groove:根據border-color的值畫3D凹槽狀的邊框
　　ridge:根據border-color的值畫3D脊狀（菱形）的邊框
　　inset:根據border-color的值畫3D凹邊，顏色較深
　　outset:根據border-color的值畫3D凸邊，顏色較淺
　　注意：如果系統不支持這些邊框的屬性值，那麼“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都會被“solid”實線邊框代替。要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性爲absolute。如果border-width不大於0，本屬性將失去作用。
　　邊框線的顏色：red（紅色）,邊框線的顏色可以用十六進制的顏色代碼，如#00ffcc。
　　我們定義邊框，實際上就是設定這三個參數值。從上面可以看出，給圖片加邊框確實很簡單。
　　更多使用技巧提示：給一段文本加邊框，可把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; }	效果預覽：
代碼2： .pic1 { border-color: #ff0000 #ffcc33 #3300FF #cccccc;border-width:4px 3px 2px 4px;border-style:dotted solid double ridge; }	效果預覽：

　　在上例中的二個定義的效果是一致的：
　　第一種是單個邊的定義，缺點是代碼過多。
　　第二種是按屬性值分類定義的方法，將邊框線的顏色、寬度和類型分類定義。
　　分類定義時請注意：
　　如果定義全部四個參數值，將按上－右－下－左的順序作用於四個邊框。
　　如果只定義一個，將用於全部的四條邊。
　　如果定義兩個，第一個用於上－下，第二個用於左－右。
　　如果定義三個，第一個用於上，第二個用於左－右，第三個用於下。

　　border屬性的靈活應用，可以產生許多特殊效果不再一一舉例。

三、圖片濾鏡定義說明

　　在CSS樣式中，提供了filter（濾鏡效果），它可以對文字、圖片、表格等確定範圍的HTML標記設置濾鏡效果。例：

黑白照片 filter: gray;	X光照片 filter: Xray;	風動模糊 filter: blur(add=true,direction=45,strength=30);	正弦波紋 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);	線型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);	放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);	白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;	底片效果 filter: invert;	左右翻轉 filter: fliph;	垂直翻轉 filter: flipv;
投影效果 filter:progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);	馬賽克 filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);	發光效果 filter:progid:DXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);	柔邊效果 filter:alpha(opacity=100, finishOpacity=0,style=2);

　　注意：progid:DXImageTransform.Microsoft是IE5.5＋及以上版本纔有的，而以前的版本中直接使用filter:name即可。