4：文本：

liu1992452008

于 2017-07-18 13:57:56 发布

阅读量210

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/liu1992452008/article/details/75301190

版权

CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Font line-height text-indent（首行缩进） text-align：center text-decoration

text-indent：50px; 可以为负值。

1：text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

【DW不支持这个属性】

2：文本阴影：

text-shadow可以用来设置文本的阴影效果。

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；有单位：px

Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。

.demo {

width: 340px;

padding: 30px;

font: bold 55px"微软雅黑";

background:#C5DFF8;

text-shadow: 2px2px 0 red;

}

****相关代码（立体文字）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #p1 {
        width: 300px;
        height: 100px;
        text-overflow: clip;
        white-space: nowrap;
        /*        超出部分剪切*/
        overflow: hidden;
    }
    
    #p1 {
        width: 300px;
        height: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        /*        超出部分省略号*/
    }
    
    #p3 {
        font-size: 60px;
        font-weight: 800;
        color: aqua;
        text-shadow: 5px 5px 3px #330099;
    }
    
    #p4 {
        font-size: 100px;
        font-weight: 800;
        color: red;
        text-shadow: 2px 2px 3px #FF0000, 4px 4px 3px #FF0066, 6px 6px 3px #FF6600, 8px 8px 3px #FF9900, 10px 10px 3px #000000;
    }

</style>

<body>
    <p id="p1">超出文本部分剪切超出文本剪切超出文本剪切</p>
    <p id="p2">超出文本部分剪切超出文本剪切超出文本剪切</p>
    <p id="p3">文本阴影</p>
    <p id="p4">立体文字</p>
</body>

</html>

相关效果（-）

****相关代码（Day6-2文本设置.html）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*  text-overflow:文本溢出时的显示方式 clip：剪切 ellipsis：省略
            overflow：hidden 溢出部分隐藏
            white-space：nowrap 强制文本显示在一行，不换行*/
        
        .text1 {
            width: 200px;
            height: 200px;
            background: orange;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        
        .text2 {
            width: 200px;
            height: 200px;
            background: orange;
            text-overflow: clip;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div class="text1">text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。</div>
    <div class="text2">text-overflow用来设置是否使用一个剪切标示对象内文本的溢出。</div>

</body>

</html>

相关效果（2）

****相关代码(Day6-3文本阴影.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 200px;
            background: skyblue;
            font: bold 55px "微软雅黑";
            text-align: center;
            line-height: 200px;
            /*text-shadow:文本阴影 
            取值：x偏移量 ，值为正，→
                 y偏移量，值为正 ↓
                 模糊程度 ，值越大，越模糊
                 颜色    */
            text-shadow: 2px 2px 0 red;
        }
    </style>
</head>

<body>
    <div class="box1">呵呵呵</div>
</body>

</html>

****相关代码(Day6-4字体的设置.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*设置字体：
        @font-face：1：字体名称  2：字体在服务器上的的相对路径或者绝对路径*/
        
        @font-face {
            font-family: "MyFont";
            src: url(Amaranth-BoldItalic.otf);
        }
        
        .box1 {
            width: 340px;
            color: #566F89;
            background: orange;
            font-size: 58px;
            /*设置字体的时候定义成自定义字体名称*/
            font-family: "MyFont";
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box1">HTML CSS</div>
</body>

</html>