CSS 07 文字处理

<div>
    <div class="font1">
        Pandar
    </div>
    <div class="font2">
        APPLE STYLE
    </div>
    <div class="font3">
        3D TEXT EFFECT
    </div>
</div>

.body{
    background-color:#666;
    text-align:center;
    font:bild 55px "Microsoft YaHei";
}
.font1{
    color:#fff;
    text-shadow:0px 0px 20px red;
}
.font2{
    color:#000;
    text-shadow:0px 1px 1px #fff;
}
.font3{
    color:#fff;
    text-shadow:1px 1px rgba(197,223,248,0.8),
                2px 2px rgba(197,223,248,0.8),
                3px 3px rgba(197,223,248,0.8),
                4px 4px rgba(197,223,248,0.8),
                5px 5px rgba(197,223,248,0.8),
                6px 6px rgba(197,223,248,0.8);
}

<div class="demo">
稳字当头稳中求进 全力以赴实现“平安高考”,2022年全国普通高校招生考试安全工作电视电话会议召开。
</div>
<div class="demo1">
稳字当头稳中求进 全力以赴实现“平安高考”,2022年全国普通高校招生考试安全工作电视电话会议召开。
</div>

.demo{
    margin:30px auto;
    width:100px;
    padding:10px;
    border:1px solid #ccc;
    height:50px;
    text-overflow:clip;
    overflow:hidden;
}
.demo1{
    margin:0px auto;
    width:100px;
    padding:10px;
    border:1px solid #ccc;
    text-overflow:ellisis;
    overflow:hidden;        //搭配使用，才能出现效果
    white-space:nowrap;   //强制不换行，搭配使用
}

<div>Hello world</div>
<h1>Hello world</h1>

html{
    font-size:10px;     //定义根单位
    font-size:62.5%;    //这个定义会更加常用
}
body{
    font-size:1.4rem;   //  10*1.4=14px
}