1.文本阴影：text-shadow
- 为文本添加阴影（没有实际用途，但是能美化页面）
- 这里要弄清楚W3C的坐标系，y轴正方向是朝下的而不是像数学坐标系朝上，x轴正方向朝右
// 语法
text-shadow : x-offset y-offset blur(模糊程度) color(阴影颜色); // 定义单个阴影
// 定义多个阴影时，用逗号隔开就好了
x-offset、y-offset的意思是阴影朝那边移动，字体是中心点，属性值可以为负，为负就是相反方向移动- 文本阴影小技巧
- “文本凸起效果”展示
<style>
p{
display: inline-block;
padding: 16px;
font-size: 32px;
font-weight: bold;
background-color: #ccc;
color: #ddd;
// 下面定义了多个阴影，用 逗号 隔开
text-shadow: -1px 0 0 white, // 将x轴负方向的阴影变成白色，不要模糊程度（相当于描了个边）
0 -1px 0 white, // 将y轴负方向的阴影变成白色，不要模糊程度（相当于描了个边）
1px 0 0 #333, // #333是黑色
0 1px 0 #333;
}
</style>
<body>
<p>我的朋友</p>
</body>
-
- “文本凹陷效果”展示
- 这里面就是将，向右、向下的阴影的颜色改成白色，向左、向上的颜色改成#333就好了，也就是说与“凸起效果”刚好相反
- “文本凹陷效果”展示
2.文本描边：text-stroke(注意兼容性，用谷歌浏览器，必须使用：-webkit-text-stroke)
- 为文本添加描边效果，所谓的“描边效果”，也就是给文字添加边框
- 可以用来做，镂空文字
- 特别注意：
- 火狐(Firefox)浏览器，也是用 -webkit-text-stroke，而不用 -moz-text-stroke
// 语法
text-stroke:width color;
width指的是，边框的宽度 可以单独写成：text-stroke-width
color指的是，边框的颜色 text-stroke-color3.文本溢出：text-overflow
- 当文本超过了一定范围时，会以省略号（...）显示，并且隐藏多余的文字
// 语法
text-overflow:属性值
属性值有两个：
1.ellipsis: 当文本溢出时，显示省略号，并且隐藏多余文字
2.clip: 当文本溢出时，不显示省略号，而是将溢出的文字裁切掉- 注意：(用于textarea标签是无效的)
- 单独使用text-overflow是无法做到文本省略的效果的，必须搭配以下两种属性
- white-space // 白色空格，意味着是否换行
- overflow // 控制盒子展示盒子多余内容的方式
- 想要实现多行文本的省略号效果，我们必须搭配JS或者jQuery(推荐插件：jquery.dotdotdot.js)
- 单独使用text-overflow是无法做到文本省略的效果的，必须搭配以下两种属性
/*
overflow: hidden;
white-space: nowrap; // wrap 换行 nowrap 不换行
text-overflow: ellipsis;
*/4.强制换行：word-wrap、word-break(要重点理解它们的区别)
- 主要针对单词或者URL地址是否换行
// 语法
word-wrap: 取值
两个取值：
1.nomal: 自动换行（默认）
2.break-word: 强制换行
word-break: 取值
三个取值：
1.nomal: 自动换行（默认）
2.break-all: 允许在单词内换行
3.keep-all: 只能在半角空格或连字符处换行- 区别
- word-wrap:break-word;是用来决定是否允许单词内断句的。如果不允许，就会出现长单词溢出。最重要的一点是，它还会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句
- word-break:break-all;它的断句方式特别粗暴，不会考虑长单词，只看当前行是否满了，满了就换行（单词会直接断掉，不考虑完整的挪到下一行）
5.嵌入字体：@font-face
- 弄明白，该属性是加载服务器端的字体
// 语法
@font-face{
font-family: 字体名称；// 多个字体名称用逗号隔开
src: url(文件路径); // 文件路径指的是：服务器端中字体文件的路径
}
3266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
