CSS3实现文字阴影与自动换行

CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。

1、text-shadow属性：在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果；

（1）text-shadow属性的使用方法：text-shadow:length length length color;其中第一个length表示的是阴影离开文字的横方向距离，第二个length表示的是阴影离开文字的纵方向的距离，第三个length表示的是阴影模糊半径，color表示的是阴影的颜色；

1）HTML代码：

<h1>text-shadow属性</h1>

2）CSS代码：

h1{
	text-shadow: 15px 15px 1px lightblue;
}

3）效果图如下：

（2）位移距离：text-shadow所使用的参数中，前两个参数是阴影离开文字的横方向和纵方向的位移距离，使用的时候必须指定这两个参数；

（3）阴影的模糊半径：text-shadow属性的第三个参数就是阴影模糊半径，代表阴影向外模糊时的模糊范围；

（4）阴影的颜色：text-shadow属性的第四个参数就是绘制阴影时所使用的颜色，可以放在三个参数之前，也可以放在三个参数之后。当没有指定颜色值的时候，会使用文本的color颜色值；

1）HTML代码：

<h1>text-shadow属性</h1>

2）CSS代码：

h1{
	color: lightblue;
	text-shadow: 15px 15px 1px;
}

3）效果图如下：

（5）指定多个阴影：可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同的颜色。指定多个阴影的时候使用逗号","将多个阴影进行分割；

1）HTML代码：

<h1>text-shadow属性</h1>

2）CSS代码：

h1{
	text-shadow: 15px 15px 5px lightblue,30px 30px 5px lightcoral,45px 45px 5px lightsalmon;
}

3）效果图如下：

2、word-break属性：

（1）浏览器文本自动换行：

（2）指定自动换行的处理方法：在CSS3中可以使用word-break属性来设置自动换行的处理方法，使用方法：标签{word-break:值;}：

<p>
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
</p>
<p>
	 A man may usually be known by the books he reads as well as by the company he keeps; for there is a companionship of books as well as of men; 
	 and one should always live in the best company,whether it be of books or of men.A good book may be among the best of friends. It is the same 
	 today that it always was, and it will never change. It is the most patient and cheerful of companions. It does not turn its back upon us in 
	 times of adversity or distress. It always receives us with the same kindness; amusing and instructing us in youth, and comforting and 
	 consoling us in age.
</p>

1）值：normal，换行规则：使用浏览器默认的规则，支持IE5以上、Safari、chrome；

①HTML代码：

②CSS代码：

p{
	word-break: normal;
}

③效果图如下：

2）值：keep-all，换行规则：只能在半角空格或连字符处理换行，支持IE5以上；

①HTML代码：

<p>
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
	CSS3中与文字字体相关的一些属性做详细的介绍，比如text-shadow属性、word-break属性、word-wrap属性等。
</p>

②CSS代码：

p{
	word-break: keep-all;
}

③效果图如下：

3）值：break-all，换行规则：允许在单词内换行，支持IE5以上、Safari、chrome；

①HTML代码：

<p>
	 A man may usually be known by the books he reads as well as by the company he keeps; for there is a companionship of books as well as of men; 
	 and one should always live in the best company,whether it be of books or of men.A good book may be among the best of friends. It is the same 
	 today that it always was, and it will never change. It is the most patient and cheerful of companions. It does not turn its back upon us in 
	 times of adversity or distress. It always receives us with the same kindness; amusing and instructing us in youth, and comforting and 
	 consoling us in age.
</p>

②CSS代码：

p{
	word-break: break-all;
}

③效果图如下：

3、长单词与URL地址自动换行：

（1）在CSS3中，使用word-wrap属性来实现长单词和URL的自动换行；

（2）使用方法：标签{word-wrap:属性值;}，其属性值有两个，第一个是normal(浏览器保持默认处理方式，只在半角空格或者连字符的地方换行)，第二个是break-word(浏览器可以在长单词或者URL地址内部进行换行)；

（3）取值为normal时：

1）HTML代码：

<p>
	https://www.baidu.com/s?wd=CSDN&rsv_spt=1&rsv_iqid=0xe81e570a0000116a&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=98012088_5_dg&ch=12&rsv_enter=1&rsv_t=e300Fb5P3ytB9%2Fz93XRHbW18xMw%2FO2ucpixOGRHnRLFe703KCVtZKT107twuozGskHk%2FHQ&oq=%25E8%258B%25B1%25E6%2596%2587%25E6%2596%2587%25E7%25AB%25A0&inputT=4303&rsv_pq=e8ac9c6200029dfb&rsv_sug3=27&rsv_sug1=16&rsv_sug7=100&rsv_sug2=0&rsv_sug4=4303&rsv_sug=1
</p>

2）CSS代码：

p{
	word-wrap: normal;
}

3）效果图如下：

（4）取值为break-word时：

1）HTML代码：

<p>
	https://www.baidu.com/s?wd=CSDN&rsv_spt=1&rsv_iqid=0xe81e570a0000116a&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=98012088_5_dg&ch=12&rsv_enter=1&rsv_t=e300Fb5P3ytB9%2Fz93XRHbW18xMw%2FO2ucpixOGRHnRLFe703KCVtZKT107twuozGskHk%2FHQ&oq=%25E8%258B%25B1%25E6%2596%2587%25E6%2596%2587%25E7%25AB%25A0&inputT=4303&rsv_pq=e8ac9c6200029dfb&rsv_sug3=27&rsv_sug1=16&rsv_sug7=100&rsv_sug2=0&rsv_sug4=4303&rsv_sug=1
</p>

2）CSS代码：

p{
	word-wrap: break-word;
}

3）效果图如下：

4、服务器端字体和@font-face属性：

（1）在页面上显示服务器端的字体：在CSS3中可以使用@font-face属性来利用服务器端的地址；

1）@font-face属性的使用方法：
@font-face{font-family:webfont;src:url("font/字体名称.otf")format("opentype");}
标签:{font-family:webfont;}
font-family属性值使用webfont来声明使用的是服务器端的字体；
src属性值中首先指定了字体文件所在路径，format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值；

2）可以使用的字体文件格式：

字体格式	字体属性
otf	opentype
ttf	truetype
eot	embedded-opentype

（2）定义斜体或者粗体字体：在定义字体的时候，可以把字体定义成粗体或者斜体，在使用服务器端字体的时候，需要根据是斜体还是粗体使用不同的文字；

使用方法：
@font-face{fnt-family:webfont;src:url(字体1.otf)}
@font-face{font-family:webfont;font-style:italic;src:url(字体2.otf)}
标签1{font-family:webfont;}
标签2{font-family:webfont;font-style:italic;}
标签1引用字体1，标签2引用字体2；

（3）显示客户端本地的字体：@font-face除了可以显示服务器端的字体还可以显示本地字体；使用方法：首先将font-family设置为本地的字体名，然后将src属性设置为local("字体")；即@font-face{font-family:字体名;src:local("字体名");}，标签{font-family:字体名;}

（4）属性值的指定：

1）font-family：设置文本的字体名称；

2）font-style：设置文本样式；取值：normal(不使用斜体)、 italic(使用斜体)、oblique(使用倾斜体)、inherit(从父元素继承)

3）font-variant：设置文本是否大小写；取值：normal(使用浏览器默认值)、small-caps(使用小型大写字母)、inherit(从父元素继承)

4）font-weight：设置文本的粗细；取值：normal(使用浏览器默认值)、bold(使用粗体)、bolder(使用更粗的字体)、lighter(使用更细的字体)、100-700从细字体到粗字体，值必须是100的倍数，其中400等于normal，700等同于bold；

5）font-stretch：设置文本是否横向的拉伸变形(IE及Firefox已支持该属性，但显示效果与正常文字并无不同)；取值：normal(正常文字宽度)、wider(把伸缩比例设置为更进一步的伸展值)、narrower(把收缩比例设置为更进一步的收缩值)、ultra-condensed(比正常文字宽度窄4个基数)、extra-condensed(比正常文字宽度窄3个基数)、condensed(比正常文字宽度窄2个基数)、semi-condensed(比正常文字宽度窄1个基数)、semi-expanded(比正常文字宽度宽1个基数)

6）font-size：设置文本字体大小；