如何给缩略图加上边框等效果.docx

如何给缩略图加上边框等效果 作者：/ShowAuthor.asp?ChannelID=1013AuthorName=雅虎雅虎| 文章来源：本站原创 点击数： 15016 更新时间：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;b