今天小编跟大家讲解下有关CSS3实现超酷的黑猫警长首页 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现超酷的黑猫警长首页 的相关资料，希望小伙伴们看了有所帮助。
先看看效果图：
具体代码：
XML/HTML Code复制内容到剪贴板 <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>text-shadow</title> <styletype="text/css"> body{ padding:0px; margin:0px; color:#666; } #text-shadow-box{ position:relative; width:598px; height:406px; background:#666; overflow:hidden; border:#3331pxsolid; } #text-shadow-boxdiv.wall{ position:absolute; width:100%; top:175px; left:0px } #text{ text-align:center; line-height:0.5em; margin:0px; font-family:helvetica,arial,sans-serif; height:1px; color:#999; font-size:80px; font-weight:bold; text-shadow:5px-5px16px#000; } div.walldiv{ position:absolute; width:100%; height:300px; top:42px; left:0px; background:#999; } #spotlight{ position:absolute; width:100%; height:100%; top:0px; left:0px; background:url(images/spotlight.png)center-300px; } #spotlighta{ color:#ccc; text-decoration:none; position:absolute; left:47%; top:56%; float:left; } aimg{border:none;} </style> </head> <body> <!--本案例的结构外套--> <divid="text-shadow-box"> <!--墙体外结构--> <divclass="wall"> <pid="text">黑猫警长</p> <div></div> </div> <!--外罩，通过他可以为页面覆盖一层桌纸，添加特殊的艺术效果--> <divid="spotlight"><ahref="index.htm"><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </div> </body> </html>以上就是本文的全部内容，希望对大家的学习有所帮助。
来源：爱蒂网
