css3 3D文字效果

text-shadow:[x offset] [y offset] [Blur size] [color];//X代表x轴上的位移,Y代表y轴上的位移,可为负值;Blur表示投影的宽度,不能为负值;color为投影的颜色

多重投影  text-shadow {1px 1px 0 #ccc,2px 2px 0 #ccc,/*end of 2 level deep grep shadow*/3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /*end of 4 level deep dark shadow*/

整体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404页面错误</title>
    <style>
        #wei{ margin: 130px auto 0px 0px;height: 100px; width: 100%;text-align: center; font-size: 24px;text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; }
        #wei { cursor: pointer; }
        a{ display: block; height: 50px; width: 100%; text-align: center;}
    </style>
</head>
<body>
    <div id="wei"></div>
    <a href="/Robotsgroup/index">点击返回“首页”>></a>
    <script>
        var c=document.getElementById("wei");
        c.innerHTML="404,未找到"+window.location.pathname+"页面";
    </script>
</body>
</html>

显示效果为:

猜你喜欢

转载自www.cnblogs.com/wsw8384/p/8952655.html