[css 揭秘]-css coding tips

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




 

posted @ 2016-12-28 18:03  FannieGirl  阅读(253)  评论(1)    收藏  举报