加入阴影的文字_脚本HTML教程-查字典教程网
加入阴影的文字
加入阴影的文字
发布时间:2015-05-12 来源:查字典编辑
摘要:网页特效|Linkweb.cn/Js|---加入阴影的文字.cool{BORDER-BOTTOM-WIDTH:1px;BORDER-LEFT...

 <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">
                <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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新脚本HTML教程学习
    热门脚本HTML教程学习
    网页设计子分类