如何给缩略图加上边框等效果
来源:互联网 发布:歌曲剪辑合并软件 编辑:程序博客网 时间:2024/05/21 09:12
在《动易网站管理系统》中,对各个频道的图片类标签所调用并显示的图片,增加了.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即可。
- 如何给缩略图加上边框等效果
- 如何给缩略图加上边框等效果
- 如何利用CSS给缩略图加上边框等效果
- 给listview加上边框。
- 如何给边框添加阴影效果
- 给GridView文本加上边框
- 关于Android查询本地视频文件、获取缩略图,并且让缩略图以相同大小显示、给缩略图添加白色边框效果
- 给图片加上边框.(仿胶卷)
- dedecms应用:给图片加上边框
- 给图片加上边框.(仿胶卷)
- WPS轻松给文字加上边框
- 如何给边框添加阴影效果:box-shadow
- 给TabHost加上拖动效果
- 给文本框加上提示效果
- 给文本框加上提示效果
- 如何给绘图加上动作
- 如何给 Toto 加上分类?
- 如何给PPT加上页码?
- Google关键词广告(PPC)术语表
- [VS] 使用Vs.Net2005 的一些小技巧
- 小結
- [WINFORM] C#下的winform编程如何在窗体中实现超级链接
- [WINFORM] C#下的winform编程如何在窗体中实现超级链接
- 如何给缩略图加上边框等效果
- 用 System.Xml 读写XML 整理文档
- ABAP--How to use MS Word as editot in SAPscript and Smart Forms
- [ASP] 创建站点计数器
- 用javascript 实现的TreeView控件 支持 IE ,Firefox
- IBM Rational LBS团队-续
- [ASP] asp.net 2.0 中使用web.config存储数据库连接字符串
- [C#] C#编码好习惯
- 二 How to encryption your code