gradient(漸變)
生成漸變顏色的背景圖片
CSS3漸變分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)
linear-gradient(線性漸變)
在線性漸變過(guò)程中蝙砌，顏色沿著一條直線過(guò)渡：從左側(cè)到右側(cè)、從右側(cè)到左側(cè)、從頂部到底部劲适、從底部到頂部或著沿任何任意軸
用法
background-image: linear-gradient（方向随珠， 顏色归榕， 顏色走芋，．．）
- 第一個(gè)參數(shù)為漸變的方向陈症， 取值為角度（如45deg）或方向關(guān)鍵字(top, bottom等)
- 0deg == top 順時(shí)針
- 注意: 幾個(gè)瀏覽器實(shí)現(xiàn)前綴漂问，在舊稿的規(guī)格中 0deg 是指右部而不是頂部赖瞒。當(dāng)是混合前綴和標(biāo)準(zhǔn)線性漸變時(shí)要特別注意角度的值女揭。一個(gè)簡(jiǎn)單的公式：90 - x = y，x 是標(biāo)準(zhǔn)用法栏饮，而 y是非標(biāo)準(zhǔn)吧兔，瀏覽器引擎前綴用法。
- 第二個(gè)參數(shù)開(kāi)始是一個(gè)顏色列表, 表示起始點(diǎn)到結(jié)束點(diǎn)之間漸變顏色;每個(gè)顏色可以加入百分比表示顏色開(kāi)始位置
background-image: linear-gradient(to top, blue, red); /*方向值為方向關(guān)鍵字*/
background-image: linear-gradient(45deg, blue, red); /*方向值為角度值*/
background-image: linear-gradient( 0deg, blue, green 40%, red );/*多個(gè)顏色, 顏色加入百分比*/
一個(gè)按鈕
.btn{
margin: 10px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
border: none;
border-radius: 20px;
background: #D38312; /*漸進(jìn)增強(qiáng)*/
background: linear-gradient(45deg, #D38312 10%,#A83279 90%);
}
10.png
條紋
div{
height: 100px;
width: 200px;
border: 1px solid #111;
background: #111;
background-image: linear-gradient(to right, #fff, #fff 5%, #111 5%, #111 10%, #fff 10%, #fff 15%, #111 15%, #111 20%, #fff 20%, #fff 25%, black);
}
11.png
radial-gradient(徑向漸變)
CSS3徑向漸變是圓形或橢圓形漸變袍嬉。顏色不再沿著一條直線軸變化境蔼，而是從一個(gè)起點(diǎn)朝所有方向混合。
用法
radial-gradient: （形狀 大小 at 位置, 顏色, 顏色,...）;
- 形狀: 定義漸變的形狀,可選參數(shù), 取值為circle(圓)或ellipse(橢圓),如果不設(shè)置則根據(jù)元素的形狀來(lái)確定
- 大小: 定義漸變的大小冬竟，可選值欧穴，默認(rèn)為徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊
- 如果漸變形狀為圓形， 取值為長(zhǎng)度值（如泵殴，50px, 10em）涮帘，此值不不能負(fù)值。
- 如果漸變形狀為橢圓笑诅， 取值為兩個(gè)值调缨， 第一個(gè)值代表橢圓的水平半徑，第二個(gè)值代表垂直半徑吆你。這兩個(gè)值除了使用長(zhǎng)度值<length>定義大小之外還可以使用<percentage>來(lái)定義這兩半徑大小弦叶。使用<percentage>定義值是相對(duì)于徑向漸變?nèi)萜鞯某叽纭Ｍ瑯硬荒転樨?fù)值妇多。
- 也可以是關(guān)鍵字（最近端伤哺，最近角，最遠(yuǎn)端者祖，最遠(yuǎn)角立莉，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）;
注意firefox目前只支持關(guān)鍵字
- 位置： 定義徑向漸變的圓心位置，用于確定元素漸變的中心位置七问◎殉埽可選參數(shù)， 默認(rèn)為元素中心械巡，也是用兩個(gè)值表示刹淌，第一個(gè)代表橫坐標(biāo)， 第二個(gè)代表縱坐標(biāo)讥耗，取值可以是 長(zhǎng)度值<length>有勾，百分比<percentage>，或方向關(guān)鍵字（top, bottom, right, left）. 注意加上at關(guān)鍵字
- 顏色列表： 用法和線性漸變一樣
div{
height: 100px;
width: 200px;
border: 1px solid #111;
}
background-image: radial-gradient(red, blue);
background-image: radial-gradient(circle, red, blue);/* 指定形狀為圓 */
background-image: radial-gradient(circle 50px, red, blue);/* 指定圓的大小 */
background-image: radial-gradient(50px 25px, red, blue);/* 指定橢圓的大小 */
background-image: radial-gradient(25% 25%, red, blue);/* 用百分比指定橢圓的大小 */
background-image: radial-gradient(circle 50px at center top, red, blue);/* 指定圓心的位置 */
background-image: radial-gradient(circle 50px at 50% 0% , red, blue);/*用百分比 指定圓心的位置 */
background-image: radial-gradient(circle 50px at 100px 0px , red, blue);/*用長(zhǎng)度值 指定圓心的位置 */
工具
Ultimate CSS Gradient Generator
綜合示例
<p data-height="1074" data-theme-id="dark" data-slug-hash="BKObvE" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >BKObvE</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
