線性漸變基本語法：

background: linear-gradient(direction,?color-stop1,?color-stop2, ...);

為了創(chuàng)建一個(gè)線性漸變，必須至少定義兩種顏色結(jié)點(diǎn)。同時(shí)，也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向(或一個(gè)角度)。

顏色結(jié)點(diǎn)：要呈現(xiàn)平穩(wěn)過渡的顏色。

例子：

從上到下的線性漸變，起點(diǎn)是橘紅色(orangered)，慢慢過渡到橘色(orange)；

css部分(注意兼容性)：

.div1{

margin:30px auto;

width:300px;

height:100px;

color: #fff;

text-align: center;

line-height: 100px;

background:-webkit-linear-gradient(orangered,orange);

background:-o-linear-gradient(orangered,orange);

background:-moz-linear-gradient(orangered,orange);

background:linear-gradient(orangered,orange);

}

html部分：

從上到下的線性漸變

效果如圖：

總結(jié)

以上是生活随笔為你收集整理的gradient设置上下渐变_css3渐变之线性渐变linear-gradient的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。