在 CSS3 中，增加了丰富的文本修饰效果，使得页面更加美观，常用的文本属性有：文本阴影、描边、溢出、强制换行、嵌入字体等。
一、文本阴影：text-shadow
1、W3C 坐标系
W3C 的坐标系和数学坐标系不同，它的 y 轴正方向是往下的：
2、text-shadow 属性简介
如果要为文字添加阴影效果，可以使用 text-shdow 属性实现，语法如下：
text-shadow:x-offset y-offset blur color
x-offset 是水平阴影，表示阴影的水平偏移距离，如果值为正，则阴影向右偏移，为负则向左偏移；
y-offset 是垂直阴影，表示阴影的垂直偏移距离，如果值为正，则阴影向下偏移，为负则向上偏移；
blur 是模糊距离，表示阴影的模糊程度，值越大，越模糊，且不能为负数，如果不需要模糊效果，可以设为 0 ；
color 是阴影的颜色。
一般文字阴影效果：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.shadow{
font-size: 30px;
text-shadow: 4px 4px 2px gray;
}
</style>
</head>
<body>
<div class="shadow">Like_Frost</div>
</html>
效果如下：
文字凸起效果：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.shadow{
height: 200px;
width: 200px;
background-color: gray;
text-align: center;
vertical-align: middle;
display: table-cell;
font-size: 30px;
font-weight: bold;
color: rgb(148, 147, 147);
text-shadow: -1px 0 0 white,
0 -1px 0 white,
1px 0 0 gray,
0 1px 0 gray;
}
</style>
</head>
<body>
<div class="shadow">Like_Frost</div>
</html>
令向左和向上的阴影颜色为白色，文本会出现凸起效果：
文字凹陷效果：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.shadow{
height: 100px;
width: 200px;
background-color: gray;
text-align: center;
vertical-align: middle;
display: table-cell;
font-size: 30px;
font-weight: bold;
color: rgb(148, 147, 147);
text-shadow: -1px 0 0 gray,
0 -1px 0 gray,
1px 0 0 white,
0 1px 0 white;
}
</style>
</head>
<body>
<div class="shadow">Like_Frost</div>
</html>
令向右和向下的阴影颜色为白色，文本会出现凹陷效果：
定义多个阴影
可以为文本定义多个不同的阴影，中间使用逗号隔开，阴影回从左到右应用到文字上，可能会出现互相覆盖的情况，但不会覆盖文字本身，也不会改变字体大小。
有如下示例：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.shadow{
font-size: 30px;
font-weight: bold;
text-shadow: 10px 10px 0 gray,
20px 20px 0 red,
30px 30px 0 yellowgreen;
}
</style>
</head>
<body>
<div class="shadow">Like_Frost</div>
</html>
浏览器中效果如下，排在前面的阴影能够覆盖后面的阴影：
二、文本描边 text-stroke
可以使用此属性给文本实现描边效果，使用方式：
text-stroke:width color
实际上是 text-stroke-width （描边宽度）和 text-stroke-color（描边颜色）两个子属性组成，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
.stroke{
color: white;
font-size: 50px;
font-weight: bold;
-webkit-text-stroke: 2px yellowgreen;
}
</style>
</head>
<body>
<div class="stroke">Like_Frost</div>
</html>
效果如下：
Chrome 和 Firefox 都只能识别 -webkit- 前缀的 text-stroke 属性。
三、文本溢出 text-overflow
当文本超出一定范围时，如果想用省略号代替，可以使用 text-overflow 来实现，其取值有两个：ellipsis（以省略号代替溢出文字）和 clip（直接裁剪掉溢出文字），要配合 white-space 和 overflow 使用：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 100px;
height: 50px;
border: 1px solid black;
}
.wrap{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.chip{
overflow: hidden;
white-space: nowrap;
text-overflow: chip;
}
</style>
</head>
<body>
<div>示例示例示例示例示例示例</div>
<div class="wrap">示例示例示例示例示例示例</div>
<div class="chip">示例示例示例示例示例示例</div>
</html>
第一个 div 为默认样式，第二个 div 为省略号效果，第三个 div 为直接裁剪：
这种方式只能实现单行文本的省略号效果，要想实现多行省略号，需要借助 JS 或 JQ。
四、强制换行 word-wrap、word-break
这两个属性用于定义长单词或者 URL 地址是否换行到下一行。
word-wrap 取值：
| 属性值 | 说明 |
|---|---|
| normal | 自动换行（默认值） |
| break-word | 强制换行 |
word-break 取值：
| 属性值 | 说明 |
|---|---|
| normal | 自动换行（默认值） |
| break-all | 允许在单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
一般情况下，只会使用 word-wrap：break-word 和 word-break：break-all 这两个来实现强制换行，其他属性不用了解。
有如下示例：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
width: 200px;
height: 80px;
border: 1px solid black;
}
.div1{
word-wrap: break-word;
}
.div2{
word-break: break-all;
}
</style>
</head>
<body>
<div>Welcome, please visit my home page: https://juejin.cn/user/3826721310116519</div>
<div class="div1">Welcome, please visit my home page: https://juejin.cn/user/3826721310116519</div>
<div class="div2">Welcome, please visit my home page: https://juejin.cn/user/3826721310116519</div>
</html>
在浏览器中效果：
当未给元素设置折行效果时，单词自动折行， URL 不折行，会溢出；使用 word-wrap: break-word; 会首先尝试挪到下一行，下一行宽度不够在折行；使用 word-break: break-all; 直接强制换行。
五、嵌入字体 @font-face
如果想要所有用户电脑山都能正常显示同一种字体，可以用 @font-face 来加载服务器端的字体，语法如下：
@font-face{
font-family:字体名称;
src:url(文件路径）;
}
font-family 属性用于定义字体的名称，示例如下：
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
@font-face {
font-family: myfont;
src: url(Inkfree.ttf);
}
div{
font-family: myfont;
font-size: 100px;
}
</style>
</head>
<body>
<div>abcd123</div>
</html>
效果如下：
并不建议使用这个方式来嵌入字体，因为中文字体文件大多数都是 10MB 以上，会严重影响页面的加载速度，而英文字体文件往往只有几十 KB，可以引入。
六、字体火焰效果
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="个人主页，HTML学习笔记"/>
<meta name="author" content="Like_Frost"/>
<meta name="description" content="学习示例"/>
<meta name="copyright" content="版权所有，转载前请联系"/>
<style type="text/css">
div{
font-size: 40px;
font-weight: 900;
color: rgb(231, 67, 67);
text-shadow: 0 0 4px white,
0 -5px 5px rgb(250, 173, 30),
0 -8px 5px rgb(255, 243, 132);
}
</style>
</head>
<body>
<div>火焰字</div>
</html>
效果如下：
