css3漸變、倒影、過渡 20160526
漸變gradient
漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
linear-gradient:線性漸變 向下/向上/向左/向右/對角方向
radial-gradient:徑向漸變 由它們的中心定義
語法：
background:-webkit-linear/radial-gradient(起始位置(top|bottom|left top),顏色 漸變到的位置百分比,顏色2 漸變到的位置百分比,…..)
<html>
<head>
<title></title> CSS3 徑向漸變
預設情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法:
background:-webkit-radial-gradient(center, shape,size, start-color, …, last-color);
shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。預設值是 ellipse。
size 引數定義了漸變的大小。它可以是以下四個值：
closest-side/farthest-side/closest-corner/farthest-corner
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 200px;
background: -webkit-radial-gradient(center,farthest-corner,red 10%,blue 95%);
}
</style>
</head>
<body>
<div class="">
</div>
</body>透明度（Transparency）
為了新增透明度，我們使用 rgba() 函式來定義顏色結點。
rgba() 函式中的最後一個引數可以是從 0 到 1 的值，
定義顏色的透明度：0 表示完全透明，1 表示完全不透明。
box-reflect
語法：
box-reflect：none |
-webkit-box-reflect:
第一個值：[above,below,left,right];
第二個值：間距（畫素值）百分比或者長度值
第三個值：漸變 線性漸變或者徑向漸變建立遮罩或者URL
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 200px;
background: red;;
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6));
}
</style>
</head>
<body>
<div class="">
</div>
</body>
</html>