幾種樣式的圖片邊框代碼

学海网易博客

幾種樣式的圖片邊框代碼

幾 種 樣 式 的 圖 片 邊 框 效 果 圖 及 代 碼(一)图片加单边框

单边框代码 <TABLE style="BORDER-RIGHT: #6666ff 12px solid; BORDER-TOP: #6666ff 12px solid; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px solid; BORDER-BOTTOM: #6666ff 12px solid" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg"> (二)图片加双边框

双边框代码

<TABLE style="BORDER-RIGHT: green 12px double; BORDER-TOP: green 12px double; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: green 12px double; BORDER-BOTTOM: green 12px double" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

(三)图片加立体边框上

立体边框上代码

<TABLE style="BORDER-RIGHT: #ff3333 12px outset; BORDER-TOP: #ff3333 12px outset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff3333 12px outset; BORDER-BOTTOM: #ff3333 12px outset; " align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

(四)图片加立体边框下

立体边框下代码

<TABLE style="BORDER-RIGHT: #6666ff 12px inset; BORDER-TOP: #6666ff 12px inset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px inset; BORDER-BOTTOM: #6666ff 12px inset;" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

(五)图片加脊柱边框

脊柱边框代码

<TABLE style="BORDER-RIGHT: #00ff00 12px ridge; BORDER-TOP: #00ff00 12px ridge; WIDTH: 550px; HEIGHT: 116px; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #00ff00 12px ridge; BORDER-BOTTOM: #00ff00 12px ridge" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

(六)图片加深色立体边框

深色立体边框代码

<TABLE style="BORDER-RIGHT: #6666ff 12px outset; BORDER-TOP: #6666ff 12px inset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #6666ff 12px inset; BORDER-BOTTOM: #6666ff 12px outset;" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

说 明:区别在代码outset 与 inset 不相同。

(七)图片加浅色立体边框

浅色立体边框代码

<TABLE style="BORDER-RIGHT: #ff3333 12px inset; BORDER-TOP: #ff3333 12px outset; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff3333 12px outset; BORDER-BOTTOM: #ff3333 12px inset;" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

说 明:区别在代码inset 与outset 不相同。

(八)图片加虚线边框

虚线边框代码

<TABLE style="BORDER-RIGHT: #ff6633 7px dashed; BORDER-TOP: #ff6633 7px dashed; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #ff6633 7px dashed; BORDER-BOTTOM: #ff6633 7px dashed;" align=center border=0>

<TBODY>

<TR>

<TD align=middle><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

说 明:虚线宽度数值7px不宜太大。

(十)框内加框边框

框内加框边框代码

<TABLE style="BORDER-RIGHT: #33ff00 12px ridge; BORDER-TOP: #33ff00 12px ridge; WIDTH: 550px; HEIGHT: 116px; BORDER-LEFT: #33ff00 12px ridge; BORDER-BOTTOM: #33ff00 12px ridge; BACKGROUND-COLOR: #33ff00" cellSpacing=0 align=center border=0>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#cc0000 border=6>

<TBODY>

<TR>

<TD>

<TABLE style="WIDTH: 550px; HEIGHT: 116px"><IMG style="WIDTH: 550px; HEIGHT: 116px" src="http://image53.360doc.com/DownloadImg/2012/07/2918/25830139_1.jpg">

说 明:添加了红色代码布分、粉色代码为大框背景颜色、蓝色代码为内框颜色和边宽。

学海博客欢迎您！

学海博客欢迎您选用！ 学海博客欢迎您选用！

欢迎您光临学海博客欢迎您光临学海博客欢迎您

学海网易博客