<html>
<head>
<title>网页特效|linkweb.cn/Js|---加入阴影的文字</title>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<style type="TEXT/CSS">.cool {
BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-WIDTH: 1px; CURSOR: hand; FONT-SIZE: 9pt
}
A {
TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: underline
}
TD {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
TH {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
BODY {
FONT-SIZE: 9pt; LINE-HEIGHT: 13pt
}
.FDropShadow {
FILTER: DropShadow(Color=#CCCCCC, OffX=8, OffY=8, Positive=1)
}
.FShadow {
FILTER: Shadow(Color=#99CCFF, Direction=135)
}
</style>
</head>
<body leftMargin="0" link="#6699FF" topMargin="0" vlink="#6699CC">
<center>
<table cellPadding="0" cellSpacing="0" width="100%">
<TBODY>
<tr>
<td vAlign="top"><table cellPadding="0" cellSpacing="0" width="694">
<TBODY>
<tr>
<td vAlign="top" width="10"></td>
<td vAlign="top" width="10"></td>
<td height="22" vAlign="top" width="664">
<table cellPadding="0" cellSpacing="0" class="hs"
width="100%" border="1" style="border-collapse: collapse" bordercolor="#111111">
<TBODY>
<tr>
<td align="middle" height="15"><font face="隶书" size="5"><strong>文字</strong><b>加入阴影(</b>CSS样式<b>DropShadow)</b></font></td>
</tr>
<tr vAlign="top">
<td> <pre>代码如下：
<font color="#009999"><STYLE TYPE="TEXT/CSS">
.FDropShadow{ filter: DropShadow(Color=#CCCCCC, OffX=8, OffY=8, Positive=1)}
</STYLE>
</font>上面代码中"<font
color="#009999">FDropShadow</font>"只是自定义的一个CSS样式。请把它放到<head></head>之间
第二部分代码放到<body></body>间:
<font
color="#009999"><TABLE WIDTH="220" HEIGHT="79" <font color="#ff9933">CLASS="FDropShadow"</font>>
<TR>
<TD HEIGHT="80"><IMG SRC=http://www.shancun.net/skin/default/image/nopic.gif ALIGN="MIDDLE" WIDTH="180" HEIGHT="60"></TD>
</TR>
</TABLE></font></pre>
<p>上面代码中<font color="#009999">CLASS="F_DropShadow"</font>
不在是放到图片里。而是放到表格里。<br>
这是要足够的空间给图片产生这种效果。<br>
如果改为下面代码将不能看到效果。<br>
<font color="#009999"><IMG SRC=http://www.shancun.net/skin/default/image/nopic.gif ALIGN="MIDDLE"
WIDTH="180" HEIGHT="60" <font color="#ff9933">CLASS="FDropShadow"</font>></font>
<br>
<br>
这种效果可以用在文字上。 <br>
</p>
<table bgColor="#cccccc" width="75%">
<TBODY>
<tr bgColor="#ffffff">
<td width="24%"><b>DropShadow参数</b></td>
<td width="64%">说明</td>
<td width="12%">数值范围</td>
</tr>
<tr bgColor="#ffffff">
<td width="24%">Color</td>
<td width="64%">颜色</td>
<td width="12%"></td>
</tr>
<tr bgColor="#ffffff">
<td width="24%">OffX</td>
<td width="64%">X偏移量</td>
<td width="12%">0~</td>
</tr>
<tr bgColor="#ffffff">
<td width="24%">OffY</td>
<td width="64%">Y偏移量</td>
<td width="12%">0~</td>
</tr>
<tr bgColor="#ffffff">
<td width="24%">Positive</td>
<td width="64%">选择“0”时是在内部加入阴影 "1"是在外面加阴影</td>
<td width="12%">0 或 1</td>
</tr>
</TBODY>
</table>
<p><br>
上表参数请自行测试！<br>
<br>
另外文字<b>阴影</b>效果:<br>
</p>
<table class="FShadow" height="36" width="42%">
<TBODY>
<tr align="middle">
<td height="25"><b><font size="3">网页特效制作 永远是您的朋友！</font></b></td>
</tr>
</TBODY>
</table>
<p>这个效果还不错吧。CSS样式如下:<br>
<br>
<font color="#009999"><STYLE TYPE="TEXT/CSS"><br>
.F_Shadow{ filter: Shadow(Color=#99CCFF, Direction=135)}<br>
</STYLE></font><br>
<br>
<font color="#009999">Shadow</font>效果有两个参数分别如下:<br>
<font color="#009999">Color</font> : 颜色 <br>
<font color="#009999">Direction</font> : 角度<br>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
</TBODY>
</table>
</td>
</tr>
<tr align="right">
<td><hr>
<p> </td>
</tr>
</table>
</center>
</body>
</html>
