纯HTML+CSS实战之高级字体的实现

本次分享内容较为基础，主要知识点便是css中盒子及文字阴影的应用

字体效果如下：

纯HTML+CSS实战之高级字体的实现

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS高级字体的实现</title>
    <style>
        body{
            background-color: #cccccc;
        }
        .text{
            font-size: 50px;
            font-weight: bold;
            position: relative;
            color: #c30;
            text-shadow: 1px 2px 3px rgba(67,8,7,0.8);
        }
        .text2{
            font-size: 40px;
            margin-top: 50px;
            text-shadow: 2px 2px 4px #000;
        }
        .box{
            margin-top: 50px;
            /*box-shadow属性向框添加一个或多个阴影*/
            box-shadow: 2px 2px 4px #000;
            width: 300px;
            height: 45px;
            line-height: 45px;
            font-size: 30px;
        }
    </style>
</head>
<body>
<div class="text">超实用的css代码块</div>
<div class="text2">超实用的css代码块</div>
<div class="box">超实用的css代码块</div>
</body>
</html>