CSS3-陰影、倒影、漸變學習筆記
CSS3陰影
shadow():陰影
1、 text-shadow ：文字陰影
text-shadow: 1px 2px3px
2、
引數：1）X軸的偏移量，越大越向右。
2）Y軸的偏移量，以上為負、下為證。
3）陰影半徑（只能時候正值，越大陰影越模糊）。
4）代表顏色
text-shadow:
1px 2px3px
,
2px 3px3px red,
2px 3px3px green,
2px 3px3px pink;
分別是四周的陰影（注意：設定的時候是以逗號分隔開）
.transform{
width: 300px;
height: 100px;
font-size: 30px;
color: #666666;
animation: active 0.2sinfinite alternate;
}
@keyframes active {
0%{text-shadow: 0 5px 1px red}
50%{text-shadow: 0 5px 1pxyellow}
100%{text-shadow: 0 5px 1pxblue}
}
</style>
</head>
<body>
<div class="transform">
<p class="p1">愛我你怕了嗎</p>
</div>
動畫和文字陰影的結合
2、 box-shadow：是給元素塊新增陰影。
引數：1.投影方式（可寫可不寫）2.X軸的偏移量 3.Y軸的偏移量4.陰影的半徑 5.陰影的顏色
box-shadow: 2px3px 2pxred;
加上inset就是陰影往元素塊內顯示。
CSS3倒影（反射）
Reflect：反射
1、用法：根據瀏覽器的相容性的問題，使用box-reflect前需要在前面加上-webkit的字首。
-webkit-box-reflect:below 10px;
2、引數：1）反射的方向（above、below、left、right）上下左右。
2）倒影和本體的距離，可以為負數。
3、其他屬性，透明度變化
-webkit-box-reflect:below -10px
-webkit-linear-gradient(transparent,transparent 50%, rgba(255,255,255,0.3 ));
Gradient：變化率，變化曲線
CSS3漸變
漸變為css3新增的屬性，分為兩種：線性漸變和徑向漸變
1、 線性漸變：
1）-webkit-gradient{引數多，但是容易調整}
background:-webkit-gradient(linear,0% 0%,100% 0%,from(yellow), to(red) )
引數：linear：線性，後面的兩組引數代表的是起始位置和終止位置，from（起始的顏色）to（漸變到哪種顏色）。
2）linear-gradient
background:linear-gradient(yellow,red)
引數只有起始顏色和終止顏色。 方向從上往下
background:linear-gradient(green,yellow,red)
也可以多種顏色
background:linear-gradient(green50% ,red)
在顏色後面加上百分數可以控制顏色開始漸變的位置。
2、 水平漸變（方向為水平方向）
background:-webkit-linear-gradient(left,red,yellow)
引數為方向、起始顏色。終止顏色。
3、 以角度為方向進行漸變
background:-webkit-linear-gradient(45deg,green,red)
引數為角度，起始顏色，終止顏色
徑向漸變：
Css3徑向漸變就是圓形或者橢圓形漸變，不沿著一條線進行變化，而是從一個起點朝著所有的方向漸變，相比於線性漸變，徑向漸變要複雜。
1. 標準語法
background:-webkit-radial-gradient(red,green); //
2.不均勻變化
background:-webkit-radial-gradient(red 30%,green 80%);
引數：在顏色的後面加上百分數可以控制漸變程度
4.形狀變化
background:repeating-radial-gradient(red 4%,yellow 30% );
引數：變化的形狀、起始的顏色變化、終止顏色。