buttonshadowbutton鏄墠绔父鐢ㄥ紑鍙戦〉闈腑闈炲父甯歌鐨勭粍浠躲€備负浜嗕娇鎸夐挳鏄庢樉锛岄€氬父鍦ㄦ寜閽笂搴旂敤闃村奖銆傝繖涓緢绠€鍗曪紝浠ｇ爜濡備笅锛?box-shadow{box-shadow:04px20px#ccc;}鏁堟灉濡備笅锛氫笉杩囨湁鏃跺€欐垜浠細閬囧埌鍙埍鐨勮璁″笀璁╀綘鍋氫竴涓笉瑙勫垯鐨勬寜閽€傛瘮濡備笅闈㈢殑銆備笉瑙勫垯鎸夐挳瀵逛簬杩欑被鎸夐挳锛屾垜浠彲浠ヤ娇鐢╮adial-gradient鏉ュ疄鐜般€俽adial-gradient鍑芥暟鍒涘缓鍏锋湁寰勫悜娓愬彉鐨勨€滃浘鍍忊€濄€備緥濡傦細.circle-btn{background-image:radial-gradient(circleat100%100%,transparent0,transparent12px,#2179f513px);}鍦ㄤ笂闈㈢殑渚嬪瓙涓紝circleat100%100%琛ㄧずat100%100%浣嶇疆锛屽嵆褰撳墠DOM鐨勫彸涓嬭涓哄渾蹇冿紝鐢讳竴涓渾銆傝繖涓渾浠庝腑蹇冨悜澶栭€愭笎鍙樺寲銆傛笎鍙樻牱寮忔槸浠庝腑蹇冨紑濮?鍒?2px鐨勯鑹叉槸閫忔槑鐨勶紝12px鍒?3px鐨勯鑹叉槸#2179f5銆傞€氳繃涓婇潰鐨勬柟娉曪紝鎴戜滑鍙互鎶婃寜閽殑鍥涗釜瑙掓崲鎴愬浘鐗囩殑鏍峰紡銆備唬鐮佸涓嬶細.circle-btn{padding:6px20px;鑳屾櫙澶у皬锛?0%70%锛涜儗鏅浘鍍忥細寰勫悜娓愬彉锛堝渾褰?00%100%锛岄€忔槑0锛岄€忔槑12px锛?2179f513px锛夛紝寰勫悜娓愬彉锛堝渾褰?0锛岄€忔槑0锛岄€忔槑12px锛?2179f513px锛夛紝寰勫悜娓愬彉锛堝渾褰?00%0锛岄€忔槑0锛岄€忔槑12px锛?2179f513px锛夛紝寰勫悜娓愬彉锛堝渾褰?100%锛岄€忔槑0锛岄€忔槑12px锛?2179f513px锛夛紱鑳屾櫙閲嶅锛氫笉閲嶅锛沚ackground-position:rightbottom,lefttop,righttop,leftbottom;}涓嶈鍒欐寜閽殑闃村奖鏈€鍚庯紝濡傛灉缁х画浣跨敤box-shadow鍋氭寜閽槾褰憋紝鏁堟灉浼氬緢濂囨€紝濡傚浘鍥撅細涓轰粈涔堜細杩欐牱锛熷洜涓篵ox-shadow鏄疍OM鑺傜偣鐩掑瓙鐨勫奖瀛愶紝鐪嬪悕瀛椾篃鑳界湅鍑烘潵銆?涓琚垏鎺夊悗锛岀洅瀛愮殑澶у皬娌℃湁鍙樺寲銆傛墍浠ラ槾褰变笉鍦ㄥ洓涓垏瑙掔殑涓嬮潰銆傛煡浜嗕竴浜涜祫鏂欙紝鍙戠幇drop-shadow灞炴€у彲浠ヨВ鍐宠繖涓棶棰樸€傜洿鎺ヤ笂浼犱唬鐮侊細.drop-shadow{filter:drop-shadow(04px20px#ccc);}drop-shadow鏄痜ilter鐨勪竴涓睘鎬ф柟娉曪紝閲岄潰鐨勫弬鏁板拰box-shadow涓€鏍枫€傛晥鏋滃鍥撅細鏈€鍚庯紝CSS鏄鍓嶇璺笂鏈€闅炬帉鎻＄殑锛屽睘鎬у涓旂牬銆傚ぇ瀹舵湁浠€涔堝ソ鐨勫涔犳柟娉曪紝娆㈣繋鍦ㄨ瘎璁哄尯鍛婅瘔鎴戙€傚畬浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:-)鏈€杩戝張鍙戜簡涓€绡囧叕浼楀彿锛氬啓浠ｇ爜鐨勮豹鍝ワ紝姹傚叧娉煒勩€傚悗闈細鎱㈡參绉疮鑷繁鎺屾彙鐨勫墠绔煡璇嗗拰鑱屽満鐭ヨ瘑銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
