十天精通CSS3的学习笔记（一）

<!--
    text-overflow:是否使用省略标记（...）
    text-overflow:clip:表示裁切|ellipsis:表示显示省略符号
    要实现溢出是产生省略号的效果，还必须定义强制文本在一行内显示（white-space:nowrap）
    及溢出内容为隐藏（overflow:hidden）
    代码如下：
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden
-->
<p class="textOverflow">好好学习，天天向上</p>
<!--
    word-wrap设置文本行为，当前行超过指定容器的边界时是否断开转行。
    word-wrap:normal:表示控制连续文本换行|break-word:表示内容将在边界内换行
    normal为浏览器默认值
    break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。
-->
<p class="wordWrap">好好学习，天天向上</p>
<!--
    @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体
    语法：
        @font-face{
            font-family:字体名称；
            src:字体文件在服务器上的相对或绝对路径；
        }
-->
<p class="fontFace">好好学习，天天向上</p>
<!--
    text-shadow:设置文本的阴影效果
    text-shadow:X-Offset Y-Offset blur color;
    X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
    Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；
    Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰;
    Color：是指阴影的颜色，其可以使用rgba色。
-->
<p class="textShadow">好好学习，天天向上</p>

<style>
    .textOverflow {
        width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .wordWrap {
        width: 100px;
        word-wrap: break-word;
        color:#9da;
    }

    @font-face {
        font-family: "MyFont";
        src: url("http://39.108.163.16/font.ttf");
    }

    .fontFace {
        width: 150px;
        font-size: 15px;
        font-family: "MyFont";
    }

    .textShadow{
        text-shadow: 4px 4px 4px #9da;
    }
</style>

转载于:https://my.oschina.net/u/3577652/blog/1507028