陰影部分
Shadow（陰影）
text-shadow是給文本添加陰影效果，使用 text-shadow 屬性給頁面上的文字添加陰影效果，text-shadow 屬性是在CSS2中定義的，在 CSS2.1 中刪除了，在 CSS3 的 text 模塊中又恢復了。
text-shadow:5px 2px 2px rgba(64, 64, 64, 0.5),
後面的參數分別是 水平偏移量，垂直偏移量上爲負數，陰影模糊半徑（此參數可選，，但其值只能是爲正值，如果其值爲0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊），後面的RGBA都知道了是顏色和透明度。
text-shadow:5px 2px 2px rgba(-64, -64, 64, 0.5),
水平X，豎直Y，前兩個參數都可以爲負值，即反方向，和定位的left，top類似
也可以設置另外三個邊的陰影
.bg2{
width: 100px;
height: 50px;
background-color: blanchedalmond;
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
margin-left:45%; 爲了觀看的更直白，並沒什麼用
}
這時可以叫同學做一個以前非主流的文字圖片。（動畫和陰影結合）
<style>
.transform{
width:400px;
height:100px;
font-size: 35px;
font-family: 楷體;
color: #666666;
animation:BiaoShiFu 0.2s infinite alternate;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行，交替執行*/
}
@keyframes BiaoShiFu
{/*改變位置和背景顏色*/
0% {text-shadow:0 5px 1px gray;}
75% {text-shadow:0 5px 1px yellow;}
100% {text-shadow:0 5px 1px red;}
}
</style>
<body>
<div class="transform">
說好
<br>
如果
</div>
2、box-shadow是給元素塊添加周邊陰影效果。
怎麼用 對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}
.bg2{
width: 100px;
height: 50px;
background-color: blanchedalmond;
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
margin-left:45%;
}
唯一不同的就是可以在X前面加一個inset，表示內陰影，就是陰影往元素快內顯示。
在text-shadow中inset不可用，試試。
5 CSS3倒影（反射）
-webkit-box-reflect
reflect：反射
1）、用法：根據瀏覽器的兼容性，使用box-reflect時需要添加-webkit和前綴。
-webkit-box-reflect: right 10px /*方向 和距離*/
2）、參數：
文字倒影：
.reflect{
width:950px;
margin:0 auto;
font-size: 80px;
font-weight: bold;
text-align: center;
-webkit-box-reflect:below 0px
-webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
}
第一個參數：none：沒有倒影 方向 上下左右（above、below、left、right）；
第二個參數：距離。和要倒影的東西的距離。可以爲負值。
3）、其它屬性、例如顏色透明度變化。
width: 100px;
height: 50px;
-webkit-box-reflect: right 10px /*方向 和距離*/
-webkit-gradient(linear, right top, right bottom, from(transparent),/*transparent*/
to(rgba(255, 255, 255, 0.5)));
Gradient：變化率、變化曲線(type,x1 y1, x2 y2, from(開始顏色值),to(結束顏色值) ); -webkit-gradient是background的一個屬性值；
第一組參數type（類型）爲 linear；
第二組參數是,x1 y1, x2 y2,當成顏色漸變體的兩個點
的座標
6 CSS3漸變
漸變爲CSS3的新增屬性，分爲兩種：線性漸變，徑向漸變。
1、線性漸變：
Gradient：變化率，梯度變化曲線
1）、-webkit-gradient（原始方法，參數多難寫，但是參數多容易調整，就是老師說的拖拉機）
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
參數分別代表：linear：線性 後面兩對百分數代表起始位置和終止位置。from（起始的顏色） to(漸變後的色)，既from裏的顏色向to裏面的色過渡。
可以用這個做數值漸變，調整參數。
2）、linear-gradient（小轎車）豎直漸變。
background: linear-gradient(red, blue); /* 標準的語法 */
參數只有起始顏色和終止顏色。
background: linear-gradient(red, blue,yellow);
也可以多個顏色。
background: linear-gradient(red 50%, blue); /* 標準的語法 */
顏色後面加個百分數可以控制在哪個地方開始漸變
3）、水平漸變（方向爲水平）
background: -webkit- linear-gradient(left ，red，yellow)
參數三個，分別是方向、起始顏色和終止顏色。
4）、已角度爲方向漸變
方向也可以是角度
background: -webkit -linear-gradient(15deg, red, blue);
2、徑向漸變：
CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿着一條直線軸變化，而是從一個起點朝所有方向混合。但相對線性漸變要比徑向漸變複雜的多。
語法：
radial-gradient
radial:徑向的; 輻射狀的; 放射式的。
background: radial-gradient(red, green, blue); /* 標準的語法 */
不均勻漸變
background: radial-gradient(red 5%, green 45%, blue 5%);
形狀變化（還有橢圓形ellipse）
background: radial-gradient(circle, red, yellow, green);
實驗橢圓的時候記得長和寬不要設置一樣
重複變化
background: repeating-radial-gradient(red, yellow 10%, green 15%);
