CSS3之文本效果

text-shadow

text-shadow: px px px color; 四个值分别代表X轴 Y轴 模糊程度 颜色

.font{
            font-size: 50px;
            text-shadow: 4px 4px 3px red;
        }

.font{
            font-size: 50px;
            text-shadow: 4px 4px red,
                        7px 7px yellow,
                        9px 9px blue;
        }

效果图：

text-overflow

text-overflow解决文字排版问题，实现多余文字呈现…效果
text-overflow:clip|ellipsis|string;

text-overflow必须和 overflow: hidden;white-space: nowrap;配合才能实现…效果

<div class="font">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇
                 哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇div>

.font{
            width: 100px;
            border: 1px solid red;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

效果图：