请JS高手解答 - 站长资源库

答案：主要就是css滤镜，你看一下下面的代码

<table border=1 style="border-style: solid; border-width: 1;font-size=12px" width="520">
   <tr>
     <td width="510">
     <span style="font-size:30pt;display:block;
              text-align:center;color:blue;
              filter:glow(color=red,strength=10);height:1">一路阳光1   </span></td>
   </tr>
   <tr>
     <td width="510">
     <span style="font-size:30pt;display:block; 
              text-align:center;color:darkblue; 
              filter:blur(add=t,direction=135,strength=10);height:1">一路阳光2</span></td>
   </tr>
   <tr>
     <td width="510">
<div style="color:red;font-size:25pt;height:1;display:block; 
filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)"> 
         <p align="center"> 一路阳光3</div></td>
   </tr>
   <tr>
     <td width="510">
<div style="height:1;width:100%; 
    font-family:impact;font-size:30pt;color:navy;display:block; 
    filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"> 
         <p align="center"> 一路阳光4</div></td>
   </tr>
   <tr>
     <td width="510">
<div style="height:1;width:100%;
    font-family:impact;font-size:30pt;color:navy;display:block;
    filter:progid:DXImageTransform.Microsoft.wave(Strength=3,freq=5)"> 
         <p align="center"> 一路阳光5</div></td>
   </tr>
   <tr>
     <td width="510">
<span style="font-size:30pt;display:block;
              text-align:center;color:darkblue;
              filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);
              height:1">一路阳光6</span></td>
   </tr>
   <tr>
     <td width="510">
<span style="font-size:30pt;display:block;
              text-align:center;color:darkblue;
              filter:shadow(color=blue);height:1">一路阳光7</span></td>
   </tr>
   <tr>
     <td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=1);">一路阳光8</div></td>
   </tr>
   <tr>
     <td width="510">
<div align="center" style="height:1;font-size:30pt;
filter:dropshadow(color=maroon,positive=0);">一路阳光9</div></td>
   </tr>
   <tr>
     <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5);
height:1;font-size:20pt;font-family:impact;background-color:blue"> 
         <p align="center">SUNNY</div></td>
   </tr>
   <tr>
     <td width="510">
<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5);
height:1;font-family:impact;font-size:20pt;background-color:blue"> 
         <p align="center">SUNNY</div></td>
   </tr>
   <tr> 
     <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font color="blue" size="6"><b>一路阳光10</b></font></td>
   </tr>
   <tr> 
     <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=blue,direction=135)" align="center"><font color="blue" size="6"><b>一路阳光11</b></font></td>
   </tr>
   <tr> 
     <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font   color="blue" size="6"><b>一路阳光12</b></font></td>
   </tr>
   <tr> 
     <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font   color=#E1E4EC size=6><b>一路阳光13</b></font></td>
   </tr>
   <tr> 
     <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font  
color=#8C96B5 size=6><b>一路阳光14</b></font></td>
   </tr>
   <tr> 
     <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font color=#8C96B5 size=6><b>一路阳光15</b></font></td>
   </tr>
   <tr>
     <td><span style="position:absolute;font-size:30pt;color=blue;filter:fliph">一路阳光16</span></td>
   </tr>
   <tr>
     <td><span style="position:absolute;left:200;font-size:30pt;color=blue;filter:flipv">一路阳光17</span></td>
   </tr>
</table>
<table align=center background="http://www.idc2008.com/468X60-8.gif" border=0>
   <tr> 
     <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)"><font size="7"> <b>一路阳光18</b></font></td>
   </tr>
</table>
<style>
div.bg{background:#ffc20e;width:50%}
b{display:block;}
/*将所有B标签转成块级元素*/

div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px，溢出部份隐藏,背景色同div.bg的背景色*/

div b.topb,div b.bottomb{background:white}
/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/

b.t1{margin:0 5px}
/*标签margin值将决定溢出的多少值被隐藏*/
b.t2{margin:0 3px}
b.t3{margin:0 2px}
b.t4{margin:0 1px;height:2px;}

</style>

<div align="center">
<div class="bg">

<b class="topb"><!--**此b标签所包含的b标签要进行溢出隐藏**-->
<b class="t1"></b>
<b class="t2"></b>
<b class="t3"></b>
<b class="t4"></b>

</b>
<br>
年度总结：涉世未深，好吃懒做，眼高手低，胆小心粗，<br>爱慕虚荣，贪图富贵，眷恋美色，才疏学浅。
<br>
<br>

<b class="bottomb">
<b class="t4"></b>
<b class="t3"></b>
<b class="t2"></b>
<b class="t1"></b>
</b>

</div>
</div>

.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
</script>
<style type="text/css">

.xsnazzy h3{margin:0; padding:0 10px 5px 10px; border-bottom:1px solid #444;}
.xsnazzy h3, .xsnazzy h3 a{font-size:1em;}
.xsnazzy {background: transparent; width:530px; margin:10px 3px 0;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #444; border-right:1px solid #444;}
.xb1 {margin:0 5px; background:#444;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}
.color_a {background:#E2F3B8; color:#000;}
</style>
</head>
<body>
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class='xboxcontent'>
<h3 class="color_a">这里是标题</h3>
<p>这里是内容</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1">

其他：晕。基本没多少人看得懂〔1-12岁〕

上一个：怎么用js给document添加一个鼠标单击事件
下一个：firebug如何根据一个客户端事件找到他所引用的js脚本

更多图片编程知识: