如何给缩略图加上边框等效果(2)_动易Cms教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!


  第一个图片边框的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;
}

效果预览:

查看更多 动易Cms教程  动易Cms模板

来源:模板无忧//所属分类:动易Cms教程/更新时间:2005-05-31
相关动易Cms教程