除了平铺图片做背景，我还能做什么。。。gradient

大多数情况下对于重复性背景第一选择的解决方案可能就是裁剪一小部分进行平铺（background:url(imgurl) repeat;），

这个方案的优势在于：1、便于书写 2、易于维护  。劣势在于1:、网络请求次数会增加，影响页面加载速度（虽然这个平铺的图片可能不是太大，但是也是一次请求，同样会浪费时间，对于大型项目来说，项目优化可能也就在于那几百毫秒内控制了）

不过，css3提供了一个新的背景设置方案，渐变，线性渐变、径向渐变，通过变换可以得到不同的样式

简单的语法不写了，书上写的很详细，写几个不错的例子瞻仰下吧--->>

一、

背景、重复线性、重复径向渐变效果

*{

margin: 0; padding: 0;

}

body{

background-color: #282828;

background-image:-webkit-radial-gradient(black 15%, transparent 16%),

-webkit-radial-gradient(black 15%, transparent 16%),

-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%),

-webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%);

background-image:radial-gradient(black 15%, transparent 16%),

radial-gradient(black 15%, transparent 16%),

radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%),

radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%);

background-position: 0 0,8px 8px,0 1px,8px 9px;

background-size: 16px;

}

.box1{

width: 400px; height: 300px;

margin: 20px auto;

background: -webkit-repeating-linear-gradient(red,green 40px,orange 80px);

background: repeating-linear-gradient(red,green 40px,orange 80px);

}

.box2{

width: 400px; height: 300px;

margin: 20px auto;

background: -webkit-repeating-radial-gradient(red,green 40px,orange 80px);

background: repeating-radial-gradient(red,green 40px,orange 80px);

}

二、

笔记本效果 笔记本代码

三、

四、

与上面的例子类似，变形

以上几个例子在书上（图解css3渐变章节）都有，作者大漠也在国外搞了一份详细的背景渐变效果回来

渐变效果总结

---

有时候看似简单的东西，深挖后才发现远没有想的那么容易！所以，只能静静的走