图片边框效果与代码

 

 

 

 1、单线框

 

 

 

代码：

<P align=center><IMG style="BORDER-RIGHT: #ff0000 3px solid; BORDER-TOP: #ff0000 3px solid; BORDER-LEFT: #ff0000 3px solid; BORDER-BOTTOM: #ff0000 3px solid"src="图片地址"></P>

 

 说明:

（1）align=center 表示图片居中对齐,align可选center(中央)、right(右边)、left(左边)；

（2）BORDER-RIGHT BORDER-TOP BORDER-LEFT BORDER-BOTTOM 分别表示图片的右边框、上边框、左边框和下边框；

（3）#ff0000 3px solid 分别表示边框的颜色、粗细和类型，边框类型有：solid=单线边框、outset=凸出线边框、double=双线边框、inset=凹出边框 、 dashed=虚线型边框 等等；

（4）代码中彩色部分均可调整。

 

 

 

 

 

 

2、双线框

 

 

 

 

代码：

<IMG style="BORDER-RIGHT: green 5px double; BORDER-TOP: green 5px double;BORDER-LEFT: green 5px double; BORDER-BOTTOM: green 5px double"src="图片地址">

 

 

 

 

 

3、凸出框

 

 

代码：

<IMG style="BORDER-RIGHT: #ff88ff 25px outset; BORDER-TOP: #ff88ff 25px outset; BORDER-LEFT: #ff88ff 25px outset; BORDER-BOTTOM: #ff88ff 25px outset" src="图片地址">

 

 

 

 

4、凹进框

 

 

代码：

<IMG style="BORDER-RIGHT: #ff88ff 25px inset; BORDER-TOP: #ff88ff 25px inset; BORDER-LEFT: #ff88ff 25px inset; BORDER-BOTTOM: #ff88ff 25px inset" src="图片地址">

 

 

 

5、虚线型

 

 

代码：

<IMG style="BORDER-RIGHT: #ff88ff 4px dashed; BORDER-TOP: #ff88ff 4px dashed; BORDER-LEFT: #ff88ff 4px dashed; BORDER-BOTTOM: #ff88ff 4px dashed"src="图片地址">

 

 

6、邮票型

 

代码：

<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; BORDER-BOTTOM: #f6ae56 3px dashed" cellSpacing=5 cellPadding=0 bgColor=#f6ae56>
<TBODY>
<TR>
<TD vAlign=center align=middle width=图片宽度 bgColor=#aeffae height=图片高度><IMG src="图片地址"></TD></TR></TBODY></TABLE>

 

 

 

 

7、凹槽框

 

代码：

<IMG style="BORDER-RIGHT: green 25px groove; BORDER-TOP: green 25px groove; BORDER-LEFT: green 25px groove; BORDER-BOTTOM: green 25px groove" src="图片地址" border=0>

 

 

 

8、脊状框

 

 

代码：

<IMG style="BORDER-RIGHT: green 25px ridge; BORDER-TOP: green 25px ridge; BORDER-LEFT: green 25px ridge; BORDER-BOTTOM: green 25px ridge" src="图片地址" border=0>

 

9、立体阴影框

 

 

代码：

 <TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=图片高度 cellSpacing=3 cellPadding=15 width=图片高度 border=2>
<TBODY>
<TR>
<TD vAlign=center align=middle bgColor=#ffffff><IMG src="图片地址"></TD></TR></TBODY></TABLE>

 

 

10、粒状阴影框

 

 

代码：

<IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=20"src="图片地址">

 

 

 

11、圆形渐变透明

 

 

 

代码：

<IMG style="FILTER: alpha(opacity=100,style=2,finishopacity=0)"src="图片地址">

 

 

 

 

12、凹状双线框

 

 

代码：

<TABLE borderColor=#ACC00FF  cellSpacing=2 cellPadding=1 align=center  border=9>

<TBODY>

<TR>

<TD><IMG src=图片地址></TD></TR></TBODY></TABLE>

 

 

13、凹槽框

 

代码：

<P align=center><IMG style="BORDER-RIGHT: green 15px groove; BORDER-TOP: green 15px groove;BORDER-LEFT: green 15px groove; BORDER-BOTTOM: green 15px groove"src="图片地址"></P>

 

 

 

14、凹状双内虚线框

 

 

代码：

 <TABLE borderColor=#0000ff cellSpacing=2  cellSpacing=1  align=center  border=8>

<TBODY>

<TR>

<TD><IMG src="图片地址" style="border:3 dashed #00cc00"></TD></TR></TBODY></TABLE>

 

 

 

15、模糊效果

 

 

代码：

<IMG style="FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)" src="图片地址">