萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> 加入陰影的文字
加入陰影的文字
<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="CUTS192.JPG" 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="CUTS192.JPG" 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">
