現(xiàn)效果：

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

實現(xiàn)代碼：

、文本陰影屬性

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

注：

第一個值 ： 水平方向的距離 （必須有的：支持負(fù)值）第二個值 ： 垂直方向的距離 （必須有的：支持負(fù)值）第三個值 ： 陰影的模糊程度 （不支持負(fù)值）第四個值 ： 陰影的顏色

第一個值 和 第二個值得位置不能互換；

當(dāng)給同一個文字設(shè)置多個陰影的時候，陰影和陰影之間用逗號隔開：如：

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

說明：水平、垂直陰影的位置允許負(fù)值可進(jìn)行多陰影設(shè)置(逗號分隔的方式)

2、盒子陰影屬性

box-shadow 盒子陰影：

X-shadow 必需的。水平陰影的位置。允許負(fù)值Y-shadow 必需的。垂直陰影的位置。允許負(fù)值blur 可選。模糊距離spread 可選。陰影的大小color 可選。陰影的顏色。inset 可選。從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影

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

當(dāng)給一個盒子設(shè)置多個陰影的時候，陰影和陰影之間用逗號隔開：

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

3、文本換行

1）Word-wrap

屬性用來標(biāo)明是否允許瀏覽器在單詞內(nèi)進(jìn)行斷句，這是為了防止當(dāng)一個字符串太長而找不到它的自然斷句點時產(chǎn)生溢出現(xiàn)象。屬性值：

normal (默認(rèn)值) 說明：只在允許的斷字點換行（瀏覽器保持默認(rèn)處理）break-word 說明：屬性允許長單詞或 URL 地址換行到下一行

2）Word-break

屬性值： break-all 說明：它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進(jìn)行單詞內(nèi)的斷句 Keep-all 說明：文本不會換行，只能在半角空格或連字符處換行 (默認(rèn)值)

4、@font-face

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中，隨著@font-face模塊的出現(xiàn)，我們在Web的開發(fā)中使用字體不怕只能使用Web安全字體（@font-face這個功能早在IE4就支持）

@font-face的語法規(guī)則:

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

iconfont字體圖標(biāo)庫的使用 ：https://www.iconfont.cn/ 阿里巴巴矢量圖庫

使用方法：

Unicode ： 新引進(jìn)iconfont.css 文件 在頁面內(nèi)添加個i標(biāo)簽 給i標(biāo)簽 添加 基類 （基本的類名） .iconfont 在把小圖標(biāo)對應(yīng)的編碼添加到i標(biāo)簽內(nèi)即可

Font class: 新引進(jìn)iconfont.css 文件 在頁面內(nèi)添加個i標(biāo)簽 給i標(biāo)簽 添加 基類 （基本的類名） .iconfont 在把小圖標(biāo)對應(yīng)的class名字加到i標(biāo)簽內(nè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>  

在把小圖標(biāo)對應(yīng)的#icon-XXX名字加到use標(biāo)簽內(nèi)即可

5、顏色模式：

1、rgba 顏色模式 rgb（）2、 Hsl 顏色模式（了解） 3、 Hsla 顏色模式（了解） 帶有透明度設(shè)置的 就是色調(diào)(Hue)、飽和度(Saturation)、亮度(Lightness)三個顏色通道的改變以及它們相互之間的疊加來獲得各種顏色，色調(diào)(Hue)色調(diào)最大值360，飽和度和亮度有百分比表示0-100%之間。

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

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