澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰寮€濮嬪啓瀛楃殑娌欓洉绋嬪簭鍛樸€傚枩娆㈡垜鐨勬枃绔犲彲浠ュ叧娉ㄢ灂鐐硅禐馃憤鍔犳垜寰俊锛歠rontendpicker锛屼竴璧峰涔犱氦娴佸墠绔紝鎴愪负鏇村ソ鐨勫伐绋嬪笀~鍏虫敞鍏紬鍙凤細鎼炲墠绔崐澶忥紝瀛︽洿澶氬墠绔?缁堢粨鐭ヨ瘑锛佺偣鎴戞帰绱㈡柊涓栫晫锛佸師鏂囬摼鎺?=>http://sylblog.xin/archives/35搴忚█鍓嶆湁background-image缁欒儗鏅鑹诧紝鍚庨潰鏈塵ask-image缁欒儗鏅鍔犲彲鐜╂€с€備粖澶╂垜浠氨鏉ヨ璇碽order-image锛岀湅鐪嬩粬鏄浣曞彂鍏夌殑锛丟o!Go!Go!border-image棣栧厛杩欎釜灞炴€ф槸涓嬮潰杩欎釜灞炴€х殑缂╁啓锛宐order-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat鍘熺悊瀵规垜鏉ヨ锛岃繖涓睘鎬ф瘮鍒汉鐨勫睘鎬ц闅撅紝鎵€浠ュ厛浠嬬粛涓€涓嬭儗鍚庣殑鍘熺悊銆傞鍏堟嬁鍑轰竴寮犲ぇ瀹堕兘鍦ㄧ敤鐨勫浘锛屾槸涓嶆槸鐬棿鏈夌浼兼浘鐩歌瘑鐨勬劅瑙夛紵涓轰粈涔堣繖寮犵収鐗囧姝ゅ彈澶у娆㈣繋鍛紵鎴戣寰楄繖寮犲浘灏辨槸涓€涓畬缇庣殑涔濆鏍笺€傛病閿欙紝涔濆鏍煎氨鏄師鍒欍€傝繖閲屾垜浠亣璁綽order-image锛堟垨border-image-slice锛夊睘鎬ц鍒嗘垚涓夌瓑浠斤紝鍥惧儚琚垎鎴愪節涓鏂瑰舰鐨勭綉鏍笺€傝繖寮犲浘鐨勫昂瀵告槸8181锛屾墍浠ュ垰濂芥瘡涓彵褰㈠崰涓€涓銆傚ぇ灏忎负2727锛屽悓鏃舵祻瑙堝櫒鍏冪礌浼氳鍒嗘垚涔濅唤锛屼絾骞朵笉鏄钩鍧囧垎閰嶃€傛瘮濡傚乏涓婅鐨勫ぇ灏忓拰borderimage涓€鏍凤紝浣嗘槸top涓棿鐨勫ぇ灏忓氨鏄墿浣欑┖闂寸殑澶у皬銆傝繖鏄浜屼釜銆俠order-image-repeat灞炴€у皢鍐冲畾borderimage鐨勪腑闂寸綉鏍煎浣曟樉绀哄湪鍏冪礌涓娿€傜浉淇″ぇ瀹剁湅鍒拌繖閲屽border-image鐨勫師鐞嗘湁浜嗕竴涓ぇ姒傜殑浜嗚В銆備笅闈粙缁峛order-image-sourceborder-image鍚勫睘鎬х殑鑳屾櫙鍥剧墖浣跨敤url()璋冪敤锛屽浘鐗囧彲浠ユ槸鐩稿璺緞涔熷彲浠ユ槸缁濆璺緞锛屼篃鍙互涓嶄娇鐢ㄥ浘鐗囷紝鍗砨order-image:none锛涜繖閲屾湁涓€涓渶瑕佹敞鎰忕殑鍦版柟锛氬鏋滄湁border-image灞炴€у苟涓攊mage涓嶆槸none锛岄偅涔坆order-style浼氬け鏁堛€備緥濡傚搴︼細200px锛涢珮搴︼細200px锛涜竟妗嗭細10px瀹炲績#000锛涘～鍏咃細20px锛沚order-image:url('./../juejin.png');閫氳繃鍥剧墖鎴戜滑浼氬彂鐜帮細1.鎴戜滑璁剧疆鐨勮竟妗嗛粦鑹叉病鏈夌敓鏁堛€?銆乥order-image鐨勫搴︿笌border鐨勫搴︿竴鑷淬€?.濡傛灉涓嶈缃産order鐨勫搴︼紝border-image灏辨病鏈夊搴︼紝鍗充娇璁剧疆浜哹order-image-width:涔熸病鏈夋晥鏋溿€傦紙涓嬮潰浼氫粙缁峛order-image-width锛屼笉鐢ㄧ潃鎬ワ紒锛塨order-image-slice瑙勫畾鍥剧墖鐨勮鍓綅缃病鏈夊崟浣嶏紝鎸囩殑鏄儚绱犮€傞粯璁ゅ崟浣嶆槸鍍忕礌(px)銆備緥濡傦細border-image:urllurl('./../juejin.png')30娆￠噸澶嶏紱杩欓噷鐨?0鏄?0涓儚绱犳潵鏀寔鐧惧垎姣斿€硷紝鐧惧垎姣斿€肩殑澶у皬鏄浉瀵逛簬杈规鍥剧墖鐨勶紝鍋囪杈规鍥剧墖鐨勫ぇ灏忔槸400px*300px锛?0%鐨勫疄闄呮晥鏋滄槸瑁佸壀鍥涘紶鐨勫ぇ灏忓浘鐗囩殑涓や晶涓?0px80px60px80px銆傚彲浠ユ帴鏀跺崟涓€笺€備互涓嬩袱涓€兼槸鎴戜釜浜虹殑鐞嗚В銆傝娉曞彲鑳戒笉姝ｇ‘銆傛垜浠彲浠ユ兂璞′竴涓嬶紝鏈夊洓琛岋紝toprightbottomleft锛岃繖鍥涜閮芥湁涓€涓€硷細top鍒癰order椤堕儴鐨勮窛绂伙紝rightbottom鍒癰order鍙宠竟鐨勮窛绂诲氨鏄痓order鐨勮窛绂籦ottom锛屼粠border宸﹁竟鍒癰order宸﹁竟鐨勮窛绂伙紝鐒跺悗鏍规嵁杩欎釜鍊煎垏鍑虹殑鍐呭涓€娆″搴斿厓绱犵殑涓婁竴涓€硷紱杈规鍥惧儚鍒囩墖锛?0%锛涗竴涓€硷細鍥涜璺濈閮戒竴鏍枫€備袱涓€糱order-image-slice:10%30%锛泃opandbottomare10%leftandrightare30%涓嬮潰鏄袱涓瀬绔殑渚嬪瓙border-image-slice:30%100%;杈规鍥惧儚鍒囩墖锛?00%100%锛涙晥鏋滃浘鏄繖鏍风殑锛屼笉瑙ｉ噴涓轰粈涔堜細杩欐牱銆傜湅瀹屽洓涓€肩殑渚嬪瓙锛屽埌杩欓噷灏卞緢绠€鍗曚簡銆備笁鍊糱order-image-slice:3030%45锛泃op涓?0宸﹀彸涓?0%top涓?5鍥涗釜鍊紈idth:200px锛涢珮搴︼細200px锛涜竟妗嗭細10px瀹炲績#000锛涘～鍏咃細20px锛沚order-image:url(./border.png);border-image-slice:1019112;鏁堟灉涓嬮潰鍒嗘瀽涓€涓嬭繖寮犲浘鏄€庝箞褰㈡垚鐨勩€傞鍏堟垜浠妸鑳屾櫙鍥炬寜鐓order-image-slice:1019112;鍒嗘垚9涓牸瀛愩€傜劧鍚庡啀鍒嗚В鏁堟灉鍥撅紝鍚屾牱鏄?鏍肩殑鏂规牸銆傞€氳繃姣旇緝杩欎袱涓暟瀛楋紝鎴戜滑灏嗚В閲婂畠浠槸濡備綍瀵瑰簲鐨勩€傞鍏坓rid1锛宐order-image琚鍓垚涓夎褰紝鐒跺悗娓叉煋鍥句笂鏄笉鏄篃鏄笁瑙掑舰锛佺劧鍚巊rid2锛岃鍑虹殑border-image鏄竴涓紝娓叉煋鍥炬槸杩欐牱鐨勶紝鍗曠嫭鎷垮嚭鏉ョ湅鐪嬫槸涓嶆槸涓€鏍凤紝鏈変汉璇存覆鏌撳浘鏄庢樉琚媺浼镐簡锛屾槸鐨勶紝杩欎釜杩樿璇磋鍙︿竴涓睘鎬order-image-repeat灞炴€т笂绾夸簡锛佸畠榛樿琚媺浼革紝鏈€鏄庢樉鐨勬槸grid7锛宐order-image娌℃湁瑁佸壀浠讳綍鍥惧儚锛屾覆鏌撳浘涓婁粈涔堜篃娌℃湁銆俧ill浜叉祴杩欎釜鍊硷紝鏈€鏂扮増鐨勭伀鐙愬拰璋锋瓕娴忚鍣ㄦ棤娉曡瘑鍒紒锛侊紒border-image-repeat涓巄ackground-repeat鍩烘湰鐩稿悓锛屼絾鍙湁涓変釜鍊煎彲鐢ㄣ€俽epeat锛堥噸澶嶏級锛宻tretch锛堟媺浼革級锛坮ound锛塻tretch榛樿鍊紃epeat鐪嬫晥鏋滐紝鍥涗釜瑙掔殑榛勮壊灏戜簡涓€鐐癸紝鍦ㄨ胺姝屽拰鐏嫄娴忚鍣ㄤ腑鏁堟灉鏄繖鏍风殑锛岃繖鏄负浠€涔堝憿锛熷洜涓簉epeat鏄粠涓棿鍚戜袱绔噸澶嶃€傚鍥炬墍绀猴紝娴忚鍣ㄤ細鑷姩璁＄畻杞暟锛屼粠鑰屼娇鍥惧儚瀹屾暣鏄剧ず銆傜劧鑰岋紝瀹冨湪璋锋瓕娴忚鍣ㄤ腑浠嶇劧缂哄け锛侊紒锛侊紒锛侊紒border-image-outset鎸囧畾缁樺埗杈规澶栧尯鍩熺殑閲忋€傚寘鎷笂涓嬮儴鍒嗗拰宸﹀彸閮ㄥ垎銆傚鏋滅渷鐣ョ鍥涗釜鍊硷紝鍒欎笌绗簩涓€肩浉鍚屻€傚鏋滅涓変釜涔熻鐪佺暐锛屽畠涓庣涓€涓浉鍚屻€傚鏋滅浜屼釜涔熺渷鐣ワ紝鍒欎笌绗竴涓浉鍚屻€備笉鍏佽border-im-outset涓鸿礋鍊笺€傝繖閲屽氨涓嶇粏璇翠簡锛岃繖閲屽彧鍒嗕袱绉嶆儏鍐点€傚鏋滀竴涓畝鍗曠殑鏁板瓧鏄竴涓畝鍗曠殑鏁板瓧锛岄偅涔堝疄闄呰窛绂绘槸杩欎釜鏁板瓧鐨勪袱鍊嶃€俠order-widthborder:10pxsolid#000;border-image-outset:1030;*pxborder-image-outset:10px30px;杩欎袱涓彲浠ユ贩鍦ㄤ竴璧凤紒锛侊紒border-image-width鎸囧畾鍊兼椂锛屼細浣滅敤浜庡洓涓柟鍚戯紱鎸囧畾涓や釜鍊兼椂锛屽垎鍒綔鐢ㄤ簬涓?涓嬪拰宸?鍙虫柟鍚戯紱鎸囧畾涓変釜鍊兼椂锛屽垎鍒綔鐢ㄤ簬椤堕儴銆佸乏/鍙虫柟鍚戙€佸簳閮紱鎸囧畾鍥涗釜鍊兼椂锛屽垎鍒綔鐢ㄤ簬top銆乺ight銆乥ottom銆乴eft銆傞粯璁ゅ€间负border-width鐨剋idth灞炴€у€间釜鏁帮紝琛ㄧず瀵瑰簲border-width杈规鐨勫€嶆暟锛?0pxsolid#000锛沚order-image-width:34;%杈规鍥惧儚鍖哄煙鐨勫ぇ灏忥細妯悜鍋忕Щ瀹藉害鐨勫尯鍩燂紝鍨傜洿鍋忕Щ楂樺害鐨勫尯鍩焍order-image-width:30%10%;81鏄浘鍍忕殑澶у皬銆?pxborder-image-width:50px5px;auto濡傛灉鎸囧畾锛屽垯瀹藉害涓虹浉搴斿浘鍍忓垏鐗囩殑鍥烘湁瀹藉害鎴栭珮搴order-image-slice:27;border-image-width:34;
