萧淑华:学习笔记——图片加边框

来源:百度文库 编辑:九乡新闻网 时间:2024/04/30 10:09:43
       多福老人欢迎您
http://qwp43.360doc.com

图片加边框
可有两种方法;
1)利用表格;
2)利用图框钻专用代码
下面是一张带框的图片

代码是





说明:
border="6" 表示外格线的宽度
cellspacing="12" 表示格线间的宽度
cellPadding=10 表示内格线至图片的距离
borderColor=#841A00 边框色彩
利用图框钻专用代码加边框
图框的种类
solid   单边框
double 双边框
outset 立体镜框
inset 立体镜框
dashed   虚线框
outset   凸出框
inset   凹进框
dashed 邮票框
groove 凹槽框
ridge 脊状框
1.单线框
设定格线的宽度border:3
色彩#ff0000
单线框solid

效果:

2.双线框
设定格线的宽度border:5
色彩green
双线框double

效果:

3.凸出框
设定格线的宽度border:25
色彩#ff88ff
凸出框outset

效果:

4.凹进框
设定格线的宽度border:25
色彩#ff88ff
凹进框inset

效果:

5.邮票框
设定格线的宽度border:3
色彩#f6ae56
.邮票框dashed
cellspacing="5"
cellpadding="0"
bgcolor="#f6ae56
代码
(对边框的设置)

bgcolor="#aeffae" width=533 height=399 align=center valign=middle>(对框内内容的设置)



效果:

6.虚线框
设定格线的宽度border:4
色彩#ff0000
虚线框 dashed

效果:

7.凹槽框
设定格线的宽度border:25
色彩green
凹槽框groove

效果:

8.脊状框
设定格线的宽度border:25
色彩green
脊状框ridge

效果:

9.立体阴影框
style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)">


(对框内内容的设置)

效果:

10阴影框