实用的css实现立体图层特效，用户可点击上面的颜色按钮来自由修改图层颜色，根据您的需求来自定义。
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<TITLE>图层自由切换颜色立体显示特效_武鸣人</TITLE>
<SCRIPT>
function c(css)
{up.className=css;
alert(css)}
</SCRIPT>
<STYLE>
TABLE,td,div {
FONT-SIZE: 9pt; CURSOR: hand; FONT-FAMILY: 宋体
}
BODY {
FONT-SIZE: 9pt; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #637994
}
.yellow {
BORDER-RIGHT: #8a6100 2px solid; BORDER-TOP: #ffe3a4 2px solid; BORDER-LEFT: #ffe3a4 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #8a6100 2px solid; BACKGROUND-COLOR: #e19d00
}
.blue {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #a6c1df 2px solid; BORDER-LEFT: #a6c1df 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #3a6ea5
}
.green {
BORDER-RIGHT: #002200 2px solid; BORDER-TOP: #b9ffb9 2px solid; BORDER-LEFT: #b9ffb9 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #002200 2px solid; BACKGROUND-COLOR: #008000
}
.menu {
BORDER-RIGHT: #FFFFFF 2px solid; BORDER-TOP: #000000 2px solid; BORDER-LEFT: #000000 2px solid; COLOR: #000080; BORDER-BOTTOM: #FFFFFF 2px solid; BACKGROUND-COLOR: #d8d8d0
}
.menu1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #adbac9 2px solid; BORDER-LEFT: #adbac9 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #637994
}
.blue1 {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0ecff 2px solid; BORDER-LEFT: #d0ecff 2px solid; COLOR: #ffff00; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #0099ff
}
.black {
BORDER-RIGHT: #000000 2px solid; BORDER-TOP: #d0d0d0 2px solid; BORDER-LEFT: #d0d0d0 2px solid; COLOR: #ffffff; BORDER-BOTTOM: #000000 2px solid; BACKGROUND-COLOR: #000000
}
</STYLE>
<META content="Microsoft FrontPage 4.0" name=GENERATOR></HEAD>
<BODY bgColor=#adbac9>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<DIV class=yellow id=up style="left: 294; width: 196; position: absolute; top: 79; height: 72">
<P align=center><br>
<br>武鸣人，立体效果 </P></DIV>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=400 border=0>
<TBODY>
<TR>
<TD class=menu onclick='c("menu")' align=middle width=50>灰</TD>
<TD class=green onclick='c("green")' align=middle width=50>绿</TD>
<TD class=blue onclick='c("blue")' align=middle width=50>蓝</TD>
<TD class=yellow onclick='c("yellow")' align=middle width=50>黄</TD>
<TD class=menu1 onclick='c("menu1")' align=middle width=50>灰1</TD>
<TD class=blue1 onclick='c("blue1")' align=middle width=50>浅蓝</TD>
<TD class=black onclick='c("black")' align=middle width=50>黑</TD>
<TD align=middle
width=50></TD></TR></TBODY></TABLE></CENTER></DIV>
</BODY>
</HTML>本文来自武鸣人网站，转载请注明出处