澶у濂斤紝鎴戞槸鍗婂馃懘锛屼竴涓垰鍒氬紑濮嬪啓浣滅殑娌欓洉绋嬪簭鍛樸€傚枩娆㈡垜鐨勬枃绔犲彲浠ュ叧娉ㄢ灂鐐硅禐馃憤鍔犳垜寰俊锛歠rontendpicker锛屾垜浠竴璧峰涔犱氦娴侊紝鎴愪负鏇村ソ鐨勫伐绋嬪笀~鍏虫敞鍏紬鍙凤細鎼炲墠绔崐澶忥紝瀛︽洿澶氬墠绔?瀛﹀畬鐭ヨ瘑锛屽洖澶嶁€滅綉绔欐ā鏉库€濓紝鍏嶈垂棰嗗彇N++缃戠珯妯℃澘锛侊紒鐐规垜鎺㈢储鏂颁笘鐣岋紒鍘熸枃閾炬帴==銆媓ttp://sylblog.xin/archives/14鍦ㄦ棩甯哥殑鍓嶇寮€鍙戜腑锛屾垜浠細缁忓父鐢ㄥ埌闃村奖鏁堟灉锛岋紙褰撶劧锛屽鏋滀綘骞虫椂鍋?绠＄悊绯荤粺锛屽彲鑳藉氨姣旇緝灏戜簡锛夊浜庝緥瀛愶紝涓嬮潰涓€娈典唬鐮侊紝杩欐浠ｇ爜鏄粠ant-design瀹樼綉澶嶅埗杩囨潵鐨刡ox-shadow:1px0#0000000f,01px#0000000f,1px1px#0000000f,1px0#0000000finset,01px#0000000finset;浣滀负CSS涓渶鍩烘湰鐨勫睘鎬э紙涓汉鎯虫硶锛夛紝澶у閮界煡閬揵ox-shadow鏄敤鏉ュ埗浣滈槾褰辩殑锛屼絾鏄綘鐪熺殑鐭ラ亾浠栨槸濡備綍鐢熸垚闃村奖鐨勫悧锛熶粬鐨勬瘡涓€涓€肩殑鍚箟鏄粈涔堬紵box鐨勪綔鐢?shadow鍙互灏嗕竴涓垨澶氫釜闃村奖闄勫姞鍒版銆傚畠鍙互鎺ュ彈鏃犳垨浠ラ€楀彿鍒嗛殧鐨勯槾褰卞垪琛ㄣ€傝娉昩ox-shadow鎺ュ彈2-4涓暱搴﹀€笺€佷竴涓彲閫夌殑棰滆壊鍊煎拰涓€涓彲閫夌殑inset鍏抽敭瀛楋紝浠ュ強鐪佺暐鐨勯暱搴﹀€奸粯璁や负0銆?*x鍋忕Щ閲弢y鍋忕Щ閲弢闃村奖妯＄硦鍗婂緞|闃村奖鎵╂暎鍗婂緞|闃村奖棰滆壊*/box-shadow:offset-xoffset-y妯＄硦鍗婂緞spread-radius.color浣嶇疆锛涚洅瀛愰槾褰憋細2px2px2px1pxrgba(0,0,0,0.2);璇锋敞鎰忥紝杩欓噷鑷冲皯闇€瑕佷袱涓暱搴﹀€硷紝鍗硂ffset-x鍜宱ffset-y锛岄槾褰辨ā绯?鎵╂暎鍗婂緞鍙互鐪佺暐锛岄粯璁や负闆讹紒offset-x锛氭í鍚戝亸绉汇€傛闃村奖鍋忕Щ鍒板鍣ㄧ殑鍙充晶锛夎礋闃村奖鍋忕Щ鍒板鍣ㄧ殑宸︿晶銆俠ox-shadow:-5px20px0px0pxgreen,5px20px0px0pxred;鐨勬鍊兼槸锛岄槾褰遍噺鏄亸绉诲埌瀹瑰櫒搴曢儴锛岃礋鍊肩殑闃村奖鍋忕Щ鍒板鍣ㄩ《閮╞lur-radius锛氬€间负[0,鈭瀅锛岃礋鍊兼棤鏁堛€俿pread-radius锛氳〃绀洪槾褰辩殑鎵╁睍鍗婂緞锛屾鍊艰〃绀哄悜澶栨墿灞曞崐寰勶紝璐熷€艰〃绀哄悜鍐呮敹缂╁崐寰勩€俢olor锛氶鑹插€硷紝鎸囧畾闃村奖鐨勯鑹层€傚彲浠ョ渷鐣ワ紝榛樿鍊间负currentColor銆俢urrentColor鏄疌SS鐨勫叧閿瓧銆傛彃鍥撅細鍐呴槾褰便€傛灞炴€ц繕鍗歌浇offset-x鍓嶇銆傞槾褰卞湪瀹瑰櫒鐨勯《閮ㄣ€傚湪闃村奖鐨勫簲鐢ㄨ繃绋嬩腑锛屼竴寮€濮嬫病鏈夋剰璇嗗埌闃村奖鍦ㄥ鍣ㄤ箣涓婏紝涓嶇畻鍐呭銆傜煡閬撲簡inset灞炴€х殑浣跨敤锛屾墠鐭ラ亾闃村奖鍦ㄥ鍣ㄤ笂闈€傚綋鐒讹紝杩欎篃鍙兘鏄唴褰卞拰澶栧奖鐨勫尯鍒€?boxShadow{瀹藉害锛?00px锛涢珮搴︼細200px锛涜竟妗嗭細1px瀹炲績#000锛涚洅瀛愰槾褰憋細5px20px0px0px缁胯壊锛涗絾鏄湅涓嬮潰杩欎釜渚嬪瓙锛氭垜浠湁涓や釜鐩搁偦鐨勫鍣紝褰撶粰涓婇潰鐨勫鍣ㄦ坊鍔犻槾褰辨椂锛屾暣涓槾褰变細瑕嗙洊涓嬮潰鐨勫鍣紝鍥犱负涓婁笅瀹瑰櫒鍦ㄥ悓涓€灞傦紝鎵€浠ユ垜浠彲浠ュ緱鍑虹粨璁洪槾褰卞湪瀹瑰櫒鐨勪笂灞傦紒濡傛灉鎴戜滑浠旂粏瑙傚療灏变細鍙戠幇锛岃櫧鐒堕槾褰辫秴鍑哄鍣ㄩ偅涔堝锛屼絾鏄粴鍔ㄦ潯骞舵病鏈夊嚭鐜板湪瀹瑰櫒涓紝杩欏厖鍒嗚鏄庡鍣ㄤ笉浼氳绠椾綔鍐呭锛乻hadow.boxShadow鐨勫墠涓栦粖鐢焮width:200px;楂樺害锛?00px锛涜竟妗嗭細1px瀹炲績#000锛泒鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑瀹氫箟浜嗕竴涓鍣ㄩ槾褰辩殑澶у皬锛屽楂樹负200px锛宱ffsetbox-shadow:0px0px0px0pxgreen;褰撴垜浠缃亸绉婚噺涓?鏃讹紝鏁堟灉濡備笅锛氭鏃舵病鏈夊奖瀛愶紝鎴戜滑鏄笉鏄寽娴嬪奖瀛愬拰瀹瑰櫒鐨勫ぇ灏忔槸涓€鏍风殑锛熻繕鏄皬銆傛帴涓嬫潵鎴戜滑娣诲姞姘村钩鍜屽瀭鐩村亸绉籦ox-shadow:20px20px0px0pxgreen;姝ゆ椂鎴戜滑鍙互瑙傚療鍒板奖瀛愬嚭鐜扮殑涓や晶鍜屽鍣ㄤ竴鏍烽暱銆傛墍浠ユ垜浠纭繚褰卞瓙鍜屽鍣ㄤ竴鏍峰ぇ锛佹垜浠粰闃村奖璁剧疆姘村钩鍜屽瀭鐩村亸绉荤殑鏃跺€欙紝鐩存帴鏁翠綋鍋忕Щ锛岀劧鍚庢祻瑙堝櫒鎶婂鍣ㄤ笂闈㈢殑閭ｅ潡瑁佹帀锛乥lur-radius鍏堟潵鐪嬬湅瀹樻柟鏂囨。鐨勮В閲婏細闈為浂鐨勬ā绯婂崐寰勮〃绀虹敓鎴愮殑闃村奖搴旇鏄ā绯婄殑锛屾瘮濡傞€氳繃楂樻柉婊ゆ尝鍣ㄣ€傛病鏈夊畾涔夌‘鍒囩殑绠楁硶锛涚劧鑰岋紝鐢熸垚鐨勯槾褰卞繀椤昏繎浼硷紙姣忎釜鍍忕礌閮藉湪鍏堕鏈熷€肩殑5%浠ュ唴锛夐€氳繃瀵归槾褰卞簲鐢ㄦ爣鍑嗗亸宸瓑浜庢ā绯婂崐寰勪竴鍗婄殑楂樻柉妯＄硦鐢熸垚鐨勫浘鍍忛槾褰卞皢浠庝腑蹇冨紑濮嬫瘡涓€杈癸紝妯＄硦鍒扮洿绾跨殑涓よ竟锛屽崐寰勪负妯＄硦鍗婂緞鐨勪竴鍗婏紒鎴戜滑鏈変竴涓?0px鐨勬ā绯婂崐寰勶細-shadow:40px20px20px0pxgreen;涓轰簡瑙嗚鏄剧ず锛屾垜浠皢瀹瑰櫒澶栫殑闃村奖杩涜浜嗗亸绉汇€傜洅瀛愰槾褰憋細300px0px60px0px#0d00ff锛涙垜浠敤涓€涓拰瀹瑰櫒涓€鏍峰ぇ鐨勭孩鑹叉鏍囧嚭闃村奖鍘熸潵鐨勫ぇ灏忥紝鐒跺悗鐢ㄨ倝鐪兼壘鍒板悜鍐呮秷澶辩殑杈圭晫锛堝彲鑳戒笉鍑嗙‘锛夛紝鎴戜滑浼氬彂鐜伴噷闈㈠拰澶栭潰鐨勬ā绯婂ぇ灏忔槸涓€鏍风殑銆俿pread-radius鍦∕DN涓婏紝绗洓涓彉閲忕О涓簊pread-radius銆備絾鎴戞洿鍠滄绉颁箣涓烘墿鏁ｈ窛绂伙紒鎴戜滑璁剧疆box-shadow:20px20px0px10pxgreen娌℃湁blurradius锛涘皢鎵╂暎鍗婂緞璁剧疆涓?0px锛屾垜浠細鍙戠幇鏁翠釜闃村奖鍛ㄥ洿澶氫簡10px鐨勮窛绂汇€傚畠瀹為檯涓婃敼鍙樼殑鏄槾褰辩殑澶у皬銆備竴寮€濮嬶紝褰卞瓙鐨勫ぇ灏忓拰瀹瑰櫒涓€鏍峰ぇ銆傝缃墿鏁ｅ崐寰勫悗锛岄槾褰变細鍦ㄥ洓涓柟鍚戜笂鍙樺ぇ銆傚鏋滄鏃惰缃簡妯＄硦鍗婂緞锛岄槾褰卞皢浠庢柊鐨勪腑蹇冨紑濮嬶紝鍚戠嚎鐨勪袱杈规ā绯娿€?/p>
