智能建站平台首页 建站流程 企业建站 网上开店 专业网站 成品网站超市 网站优化 网站案例 模版展示 帮助中心 联系方式
如何利用CSS给缩略图加上边框等效果
武汉网络家“网站通”智能建站平台   2007-08-02 00:06:02 作者:武汉网络家 来源:武汉网站建设 网络公司 网络推广 文字大小:[][][]
假设用.pic1、.pic2、.pic3和.pic5这几个CSS样式定义,分别对应网站各频道调用并显示的图片进行样式控制。恰当使用各种不同的定义,就能控制所调用的图片的样式,包括统一大小、图片边框、投影效果等CSS样式。以下详细说明定义及样式。

一、添加定义

添加以下CSS样式定义:

.pic1
{
***;***;
}
.pic2
{
***;***;
}
……
  其中***部分即为您所要定义的CSS样式语句。

二、border样式定义说明

1、给图片加统一粗细的边框

  CSS的样式定义中有一个属性“border”(边框),它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面将通过实例来说明其应用技巧。例:

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

上面的示例中,给图片加上了边框。
边框线的颜色、粗细是可变的。
例:
border: 1px solid red;

order: 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即可。

 


 

最新评论
发表评论  
关于我们 网络推广 付款方式 文档下载 域名注册 邮局信箱 网址导航 第一武汉网 会员中心 友情链接 设计师园地 备案信息提交
 
网监
武汉网络家联盟科技有限公司-武汉网络家“网站通”智能建站平台
公司地址:中国湖北省武汉市武昌区武珞路442号中南国际城D2-2510室
联系电话:027-18071120160    QQ:371721776
Powered By 武汉网络家联盟 WH18.CN  Copyright © 2006-2008  鄂ICP备09018832号-12
武汉网络家联盟为支付宝特约信任商家,全面支持支付宝在线担保支付。支付宝签约信任商家编号是: AIP0805577
武汉网站建设|武汉网站推广|武汉建网站|武汉做网站|武汉网络公司|百度推广|武汉网建|武汉建站公司|专业网络公司|武汉网页设计|武汉网上开店
第一武汉网
|武汉婚庆网|武汉吃网|武汉汽车门户网|武汉分类信息网|武汉空调网|武汉家电网|武汉同学网|武汉同乡会|湖北指南网|武汉法网|武汉网络家联盟
武汉搬家公司    青山宠愿   
 鄂公网安备 42010602003038号 
 
网络经济主体信息