gradient(漸變)
生成漸變顏色的背景圖片
CSS3漸變分為linear-gradient(線(xiàn)性漸變)和radial-gradient(徑向漸變)
linear-gradient(線(xiàn)性漸變)
在線(xiàn)性漸變過(guò)程中，顏色沿著一條直線(xiàn)過(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)線(xià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%);
}
條紋
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);
}
radial-gradient(徑向漸變)
CSS3徑向漸變是圓形或橢圓形漸變。顏色不再沿著一條直線(xiàn)軸變化挑格，而是從一個(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)鍵字
- 顏色列表： 用法和線(xià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>
