渐变gradient
渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
linear-gradient:线性渐变 向下/向上/向左/向右/对角方向
radial-gradient:径向渐变 由它们的中心定义
语法:
background:-webkit-linear/radial-gradient(起始位置(top|bottom|left top),颜色 渐变到的位置百分比,颜色2 渐变到的位置百分比,…..)
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 200px;
background: -webkit-linear-gradient(left, red 10%,green 30%,blue);
}
</style>
</head>
<body>
<div class="">
</div>
</body>
</html>
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>