[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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。