现效果：

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

实现代码：

、文本阴影属性

text-shadow:10px 10px 10px red;

注：

第一个值 ： 水平方向的距离 （必须有的：支持负值）第二个值 ： 垂直方向的距离 （必须有的：支持负值）第三个值 ： 阴影的模糊程度 （不支持负值）第四个值 ： 阴影的颜色

第一个值 和 第二个值得位置不能互换；

当给同一个文字设置多个阴影的时候，阴影和阴影之间用逗号隔开：如：

text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,2px -25px 18px #f20;

说明：水平、垂直阴影的位置允许负值可进行多阴影设置(逗号分隔的方式)

2、盒子阴影属性

box-shadow 盒子阴影：

X-shadow 必需的。水平阴影的位置。允许负值Y-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色。inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

box-shadow: 10px 10px 5px 10px #888888 inset;

当给一个盒子设置多个阴影的时候，阴影和阴影之间用逗号隔开：

box-shadow: 10px 10px 5px 10px #888888 inset，10px 10px 5px 10px #888888 inset，10px 10px 5px 10px #888888 inset;

3、文本换行

1）Word-wrap

属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。属性值：

normal (默认值) 说明：只在允许的断字点换行（浏览器保持默认处理）break-word 说明：属性允许长单词或 URL 地址换行到下一行

2）Word-break

属性值： break-all 说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句 Keep-all 说明：文本不会换行，只能在半角空格或连字符处换行 (默认值)

4、@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体（@font-face这个功能早在IE4就支持）

@font-face的语法规则:

@font-face { 
             font-family: <YourWebFontName>;
	     src: <source> [<format>][, []]*; 
	     [font-weight: <weight>]; 
	     [font-style: <style>]; 
}

iconfont字体图标库的使用 ：https://www.iconfont.cn/ 阿里巴巴矢量图库

使用方法：

Unicode ： 新引进iconfont.css 文件 在页面内添加个i标签 给i标签 添加 基类 （基本的类名） .iconfont 在把小图标对应的编码添加到i标签内即可

Font class: 新引进iconfont.css 文件 在页面内添加个i标签 给i标签 添加 基类 （基本的类名） .iconfont 在把小图标对应的class名字加到i标签内即可

Symbol:

<script src="./iconfont/iconfont.js"></script>
	<style>
		.icon {
			 width: 1em;
			 height: 1em;
			 vertical-align: -0.15em;
			fill: currentColor;
			 overflow: hidden;
			}
	</style> 
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-XXX"></use></svg>  

<script src="./iconfont/iconfont.js"></script>
	<style>
		.icon {
			 width: 1em;
			 height: 1em;
			 vertical-align: -0.15em;
			fill: currentColor;
			 overflow: hidden;
			}
	</style> 
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-XXX"></use></svg>  

在把小图标对应的#icon-XXX名字加到use标签内即可

5、颜色模式：

1、rgba 颜色模式 rgb（）2、 Hsl 颜色模式（了解） 3、 Hsla 颜色模式（了解） 带有透明度设置的 就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

color： Hsla(200,50%,50%,0.5)color： Hsl(200,50%,50%)

a（透明度）的取值范围是0——1