CSS新手入门笔记整理：CSS3文本样式

文本阴影：text-shadow

语法

p{text-shadow:x-offset="数值" y-offset="数值" blur="数值" color="色值";}

x-offset是“水平阴影”，表示阴影的水平偏移距离，单位可以是px、em和百分比等。

y-offset是“垂直阴影”，表示阴影的垂直偏移距离，单位可以是px、em和百分比等。

blur是“模糊距离”，表示阴影的模糊程度，单位可以是px、em和百分比等。blur值越大，阴影越模糊；blur值越小，阴影越清晰。blur不能为负值。如果不需要阴影模糊效果，可以把blur值设置为0。

color是“阴影颜色”，表示阴影的颜色。

定义多个阴影

可以使用text-shadow属性为文本定义多个阴影，并且针对每个阴影使用不同的颜色。当定义多个阴影时，text-shadow属性是一个以英文逗号隔开的值列表。

语法

p{
  text-shadow:-1px 0 0 #333,　 /*向左阴影*/
  0 -1px 0 #333,　/*向上阴影*/
  1px 0 0 white,　/*向右阴影*/
  0 1px 0 white;　/*向下阴影*/
  }

---

文本描边：text-stroke

text-stroke是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成的。

• text-stroke-width：定义边框的宽度。
• text-stroke-color：定义边框的颜色。

语法

p{text-stroke:width="宽度值" color="色值"};

---

文本溢出：text-overflow

语法

p{
  text-overflow:取值;
  }

属性值	说明
ellipsis	当文本溢出时，显示省略号，并且隐藏多余的文字
clip	当文本溢出时，不显示省略号，而是将溢出的文字裁切掉

单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，下面是完整的语法：

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

---

强制换行：word-wrap、word-break

语法

p{
 word-wrap:取值;
或
word-break:取值;
  }

word-wrap属性取值
属性值	说明
normal	自动换行(默认值）
break-word	强制换行

word-break属性取值
属性值	说明
normal	自动换行(默认值)
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

---

• word-wrap:break-word;用来决定是否允许单词内断句的。如果不允许的话，长单词就会溢出。它会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。
• word-break:break-all;断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。
• word-wrap和word-break这两个属性都是针对英文页面来说的，在中文页面中很少用到。

---

嵌入字体：@font-face

“嵌入字体”，指的是把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体。

语法

@font-face
{
  font-family: 字体名称;
  src:url(文件路径);
}

font-family属性用于定义字体的名称，src属性中的“文件路径”指的是服务器端中字体文件的路径。

---