澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰鍒氬紑濮嬪啓浣滅殑娌欓洉绋嬪簭鍛樸€傚枩娆㈡垜鐨勬枃绔犲彲浠ュ叧娉ㄢ灂鐐硅禐馃憤鍔犳垜寰俊锛歠rontendpicker锛屾垜浠竴璧峰涔犱氦娴侊紝鎴愪负鏇村ソ鐨勫伐绋嬪笀~鍏虫敞鍏紬鍙凤細鎼炲墠绔崐澶忥紝瀛︽洿澶氬墠绔?缁堢粨鐭ヨ瘑锛佺偣鎴戞帰绱㈡柊涓栫晫锛佸師鏂囬摼鎺?=>http://sylblog.xin/archives/37娓愬彉鎷奸煶ji脿nbi脿n锛屾剰鎬濇槸鏈夎寰嬬殑鍙樺寲銆傛笎鍙樿兘缁欎汉寮虹儓鐨勯煹寰嬫劅鍜岀編鎰熴€傝繖绉嶅舰寮忓湪鏃ュ父鐢熸椿涓殢澶勫彲瑙侊紝鏄竴绉嶅父瑙佺殑瑙嗚褰㈣薄銆傜敱浜庣粯鐢讳腑鐨勯€忚鍘熺悊锛岀墿浣撲細鐢辫繎鍙樺ぇ锛岀敱杩滃彉灏忥紝璁稿鑷劧鍥惧儚閮藉厖婊′簡褰㈠紡涓婄殑娓愬彉銆傛笎鍙樻妧鏈殑杩愮敤鍙互浣跨敾闈㈡洿鍔犱赴瀵岋紝缁欎汉浠ユ洿寮虹殑瑙嗚鍐插嚮鍔涖€俠ackground-image-璁剧疆鍏冪礌鐨勮儗鏅浘鍍忓畾涔夊浘褰紙渚嬪PNG銆丼VG銆丣PG銆丟IF銆乄EBP锛夋垨娓愬彉搴旂敤浜庡厓绱犵殑鑳屾櫙銆傛湁涓ょ涓嶅悓绫诲瀷鐨勫浘鍍忓彲浠ュ寘鍚湪CSS涓細甯歌鍥惧儚鍜屾笎鍙樺浘鍍忋€傚睘鎬у€紆rl('URL')ImageURLbackground-image:url(./bk.jpg);none榛樿鍊硷紝鏃犲浘鐗囨笎鍙榣inear-gradient()绾挎€ф笎鍙橀粯璁ゅ垱寤轰竴涓粠涓婂埌涓嬬殑绾挎€ф笎鍙樺浘鐗囪儗鏅?image锛氱嚎鎬ф笎鍙橈紙#55efc4锛?a29bfe锛夛紱syntaxbackground-image:linear-gradient(angle/to,color,棰滆壊寮€濮嬫笎鍙樼殑浣嶇疆,......);鑳屾櫙鍥惧儚锛氱嚎鎬ф笎鍙橈紙锛夛紝绾挎€ф笎鍙橈紙锛?..锛涙牴鎹娉曪紝鍚堢悊鐚滄祴锛屼粠涓婂埌涓嬶紝榛樿涓?80deg锛屾垨鑰呭埌搴曢儴锛屾祻瑙堝櫒浼氶粯璁ゅ皢绗竴涓鑹茬殑浣嶇疆璁剧疆涓?%锛屽皢鏈€鍚庝竴涓鑹茬殑浣嶇疆璁剧疆涓篠et浣嶇疆鍒?00%绀轰緥1degbackground-image:linear-gradient(45deg,#55efc4,#a29bfe);璇硶鑳屾櫙鍥惧儚鐨勭ず渚?锛氱嚎鎬ф笎鍙橈紙鍒板乏涓婅锛?55efc4锛?a29bfe锛夛紱绀轰緥3澶氳壊澶氫綅缃甽inear-gradient(#55efc4,#a29bfe30%,#fd79a850%)鎺ユ敹澶氫釜linear-gradient閿欒绀轰緥background-image:linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient(#d63031,#e84393);绗簩涓笎鍙樻病鏈夊嚭鐜帮紝鍥犱负绗竴涓笎鍙樻槸浠?-100%锛屽～婊′簡鏁翠釜鍏冪礌锛屾墍浠ョ浜屼釜娌℃湁鍑虹幇銆傛纭殑渚嬪瓙锛屼娇鐢╰ransparentusetransparent*\%;to浣块儴鍒嗙┖闂撮€忔槑浠ユ樉绀哄叾浠栨笎鍙?background-image:linear-gradient(45deg,#55efc4,#a29bfe,transparent50%),linear-gradient(#d63031,#e84393);radial-gradient()RadialGradient寰勫悜娓愬彉鍒涘缓鈥滃浘鍍忊€濄€備粠涓績鍚戝洓鍛ㄥ彂鏁ｇ殑褰㈢姸涓哄渾褰㈡垨妞渾璇硶background-image:radial-gradient([shapesizeat(position)],startcolor,...,endcolor);褰㈢姸妞渾锛堥粯璁わ級锛氭き鍦嗙殑寰勫悜娓愬彉銆傝儗鏅浘鍍忥細寰勫悜娓愬彉锛?48dbfb锛?ee5253锛夛紱circle:鍦嗗舰寰勫悜娓愬彉background-image:radial-gradient(circle,#48dbfb,#ee5253);sizefarthest-corner锛堥粯璁わ級锛氭寚瀹氬緞鍚戞笎鍙樼殑鍗婂緞闀垮害涓轰粠鍦嗗績鍒癱losest-sidefromcenter鐨勮搴︼細鎸囧畾寰勫悜娓愬彉鐨勫崐寰勯暱搴︿负浠庡渾蹇冨紑濮嬪渾鍒版渶闈犺繎鍦嗗績鐨勯偅涓€渚ackground-image:radial-gradient(closest-side,#48dbfb,#ee5253);closest-corner:鎸囧畾寰勫悜娓愬彉鐨勫崐寰勯暱搴︽槸浠庡渾鍒版渶鎺ヨ繎鍦嗗績鐨勮搴︾涓績鏈€杩滅殑鍦哸t(position)atcenter锛堥粯璁わ級锛氫腑闂翠负寰勫悜娓愬彉鍦嗗績鐨勭旱鍧愭爣鍊笺€俠ackground-image:radial-gradient(atcenter,#48dbfb,#ee5253);attop锛歵op涓哄緞鍚戞笎鍙樹腑蹇冪殑绾靛潗鏍囧€笺€俠ackground-image:radial-gradient(attop,#48dbfb,#ee5253);atbottom:搴曢儴鏄緞鍚戞笎鍙樹腑蹇冪殑绾靛潗鏍囧€笺€俙background-image:radial-gradient(attop,#48dbfb,#ee5253);`atvalue锛歷alue鐨勪綅缃负寰勫悜娓愬彉鍦嗗績鐨勬í鍧愭爣鍊笺€俙background-image:radial-gradient(at1590px,#48dbfb,#ee5253);`conic-gradient鍦嗛敟娓愬彉绫讳技浜庡緞鍚戞笎鍙樸€備袱鑰呴兘鏄渾褰㈢殑锛屽苟浣跨敤鍏冪礌鐨勪腑蹇冧綔涓鸿壊鏍囩殑婧愮偣銆傜劧鑰岋紝鍦ㄥ緞鍚戞笎鍙樼殑鑹叉爣浠庡渾蹇冨嚭鐜扮殑鍦版柟锛屽渾閿ュ舰娓愬彉灏嗗畠浠斁缃湪鍦嗗懆鍥淬€傚湪[鏌愪釜鐐筣鍋氫竴涓渾閿ュ舰娓愬彉锛屼粠涓€涓搴︾殑[涓€绉嶉鑹瞉寮€濮嬶紝浠涓€涓搴鐨刐鍙︿竴绉嶉鑹瞉缁撴潫銆?
