[css 揭秘]-css coding tips

css 揭秘之css coding tips

demo（1）

html 代码：

<body>
    <section>
        <div class="demo1"></div>
    </section>
</body>

css 代码：

.demo1{
　　 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