音画制作【边框制作】（二）

音画制作

(一）HTML代码

1.表格标签（边框制作）：

CSS样式表有非常强大的功能，调用CSS语句的各种滤镜属性和属值修饰图片边框，或编辑音画贴边框，可以得到精采的效果．先看两种贴图标签的不同效果．

调用CSS语句修饰图片边框

（１）HTML贴图标签代码如下：

<INPUT src="http://image38.360doc.com/DownloadImg/2011/09/3023/18153567_17.jpg"

type=image width=280 style="border:16px #0000ff double">

◆style=套用CSS标记．

◆border:16px #2828FF double　双线边框语句，宽16点，蓝色．

调用CSS语句修饰图片边框

（2）粒状阴影边框实例代码：

<CENTER><img src="http://image50.360doc.com/DownloadImg/2012/03/2322/22713340_3.jpg" width=400 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF00FF,strength=40)"></CENTER>

调用CSS语句修饰图片边框

（3）邮票边框实例代码：

<table style="border:4 dashed #f6ae56" cellspacing="6" cellpadding="0" bgcolor="#f6ae56">

<tr>

<td bgcolor="#aeffae" width=400 height=400 align=center valign=middle>

<INPUT src="http://image50.360doc.com/DownloadImg/2012/03/2322/22713340_1.jpg"type=image width=400 >

</TD></TR></TBODY></TABLE>

显示结果：

调用CSS语句修饰图片边框

（4）立体阴影框实例代码：

<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle><img src="http://image50.360doc.com/DownloadImg/2012/03/2322/22713340_4.jpg"> </td></tr></table></center>

<br><br>

<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-9/20089195151190032.gif"></CENTER>

显示结果：

调用CSS语句修饰图片边框

（5）图片加短矩形边框实例代码：

<center>

<img src="http://image50.360doc.com/DownloadImg/2012/03/2322/22713340_3.jpg" width=350 style="border:12px #8B008B dashed")>

</CENTER>

显示结果：

  调用CSS语句修饰图片边框

（6）图片加立体边框实例代码：

<center>

<img src="http://image50.360doc.com/DownloadImg/2012/03/2322/22713340_3.jpg" width=350 style="border:22px #fbd44c ridge" )

</CENTER>

显示结果：

（7）图片圆形羽化实例代码：

◆圆形羽化的属性与参数是tyle="FILTER: alpha(opacity=100,style=2)"．

◆如果须要矩形羽化，把羽化属性与参数改为style=3，即可．

圆形羽化图片显示结果：

（8）图片左右颠倒实例代码：

◆filter:fliph (向右)

◆fliph:filter (向左)

显示结果：