[css 揭秘]-css coding tips

时间 2019-11-16

标签 css 揭秘 coding tips 栏目 CSS 繁體版

原文原文链接

css 揭秘之css coding tipscss

demo（1）html

html 代码：css3

<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;
}

效果图：ide

总结：ui

css3 标签 linear-gradient 背景线性渐变spa

先解释一下这个标签，linear-gradient code

/* 旧语法，带前缀而且已经废弃，以支持老版本的浏览器 */ 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