CSS3之背景渐变

在没有 CSS3的时候，如果想做一个背景渐变效果，就得使用一个很细的渐变切片进行水
平/垂直平铺。对于使用图片而言，这确实是一种很好的折中方案。一张仅有一两像素宽
的图片，不会给宽带造成太大负担，而且它可以用在网站的多个元素上。

aside {
　　border-right-color: #e8e8e8;
　　border-right-style: solid;
　　border-right-width: 2px;
　　margin-top: 58px;
　　padding-left: 1.5%;
　　padding-right: 1.0416667%;
　　margin-left: 1.0416667%;
　　float: left;
　　width: 20.7083333%;
　　background: url(../img/sidebarBg2.png) 50% repeat-x;
}

这种方式当然可以做渐变效果，但是不够灵活。（如果再往下增加海报，需要重新去ps中做图了）

一、CSS3中线性渐变

 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); 

看一下线性渐变的语法

1 background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); 

（1）圆括号中的第一个值（即例子中的 90deg ，可选）定义了渐变的方向。不定义该值则
默认是一个垂直从顶部到底部的渐变。你还可以使用如 to top right 这样的值，这
会产生一个朝向右上角的对角线渐变。
（2） 下一个值（例子中的 #ffffff 0% ）定义的是渐变的“起点”，包括起点的颜色和位置。
你也可以使用像 blue 20% 这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐
变开始位置则位于假想的渐变路径的 20%处。同样，起点位置也可以使用负值，这样
渐变从实际可见区域之外就开始了。比如：
background: linear-gradient(90deg, #ffffff -50%, #e4e4e4 50%, #ffffff 100%);
上面这行代码意味着渐变从可见区域之外开始，假想的渐变路径比可见区域长 50%。
（3） 下一个值指的是“过渡颜色点”。我们来回顾一下：沿着 90 度垂直方向，从白色开始
（( #ffffff 0% ），向位于渐变路径 50%处的 #e4e4e4 这个颜色（浅灰色）渐变。这里
就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多
的过渡颜色点（使用逗号分隔）。
（4）圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色
点，最后一个值始终是终点。

二、径向背景渐变

 background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%); 

 

 三、重复渐变

 background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px); 

四、背景渐变图案

body {
background-color:white;
background-image:
radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),
repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,
hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,
transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,
hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,
transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;
}