css 揭秘之css coding tips
demo（1）
html 代码：
<body>
<section>
<div class="demo1"></div>
</section>
</body>
css 代码：
.demo1{
width: 100px;
height: 100px;
padding: 6px 16px;
border-image-repeat: 1px solid #444d88;
background: red linear-gradient(red,white);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
}
效果图：
总结：
css3 标签 linear-gradient 背景线性渐变
先解释一下这个标签，linear-gradient
/* 旧语法，带前缀并且已经废弃，以支持老版本的浏览器 */
background: -prefix-linear-zgradient(top, blue, white);
/* 新语法，不带前缀，以支持标准兼容的浏览器（Opera 12.1， IE 10， Firefox 16， Chrome 26， Safari 6.1） */
background: linear-gradient(to bottom, blue, white);更多的描述可以参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
原文：http://www.cnblogs.com/ifannie/p/6193239.html