鎸佺画鍒涗綔锛屽姞閫熸垚闀匡紒杩欐槸鎴戝弬鍔犫€滄帢閲戞瘡鏃ユ柊椤圭洰路6鏈堟洿鏂版寫鎴樿禌鈥濈殑绗?3澶╋紝鐐瑰嚮鏌ョ湅娲诲姩璇︽儏鏈€骞跨殑鏄鏉傜殑鑳屾櫙鍥俱€傚鏋滆鍦ㄥ鏉傜殑鑳屾櫙涓婃坊鍔犳枃瀛楋紝鏃㈣兘娓呮櫚鏄剧ず鏂囧瓧锛屽張鑳藉敖鍙兘淇濈暀鍘熸湁鑳屾櫙锛屼娇鐢ㄧ（鐮傜幓鐠冩晥鏋滈潪甯搁€傚悎銆傛湰鏂囦富瑕佽瑙ｈ儗鏅（鐮傜幓鐠冩晥鏋滐紝鍚屾椂涔熻涓€涓嬪浣曞鏂囧瓧杩涜妯＄硦澶勭悊銆傚鏋滄噿寰楀啓浠ｇ爜锛屼篃鍙互浣跨敤銆婅繖18涓綉绔欒兘璁╀綘鐨勯〉闈㈣儗鏅偒閰疯捣鏉ャ€嬩腑鎻愬埌鐨凣lassMorphism缃戠珯鐩存帴鐢熸垚姣涚幓鐠冩晥鏋溿€傝儗鏅浘鍍忔瘺鐜荤拑鍦≒hotoshop涓紝姣涚幓鐠冧富瑕佷娇鐢ㄩ珮鏂ā绯婂拰缇藉寲銆傝鐧戒簡灏辨槸妯＄硦銆傚湪CSS涓紝濡傛灉瑕佸疄鐜版ā绯婃晥鏋滐紝鍙互浣跨敤婊ら暅銆傝儗鏅€氬父璁剧疆涓洪粦鑹层€佺伆鑹叉垨鐧借壊锛岀劧鍚庤缃儗鏅殑涓嶉€忔槑搴﹀彲浠ュ疄鐜扮畝鍗曠殑纾ㄧ爞鐜荤拑鏁堟灉銆備负浜嗗疄鐜版ā绯婏紝鎴戜娇鐢ㄤ簡backdrop-filter:blur();.<鏍峰紡>.box{瀹藉害锛?00px锛涢珮搴︼細700px锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱鑳屾櫙锛歶rl('http://k21vin.gitee.io/front-end-data-visualization/assets/bg01.13dfb262.jpg');鑳屾櫙澶у皬锛?00%锛涜儗鏅綅缃細涓績锛泒.frosted__glass{瀹藉害锛?0%锛涢珮搴︼細40%锛涜竟鐣屽崐寰勶細40px锛涙樉绀猴細寮规€э紱璇佹槑鍐呭锛氬眳涓紱瀵归綈椤圭洰锛氬眳涓紱瀛椾綋澶у皬锛?0px锛涘瓧姣嶉棿璺濓細0.5em锛涜儗鏅护闀滐細妯＄硦锛?0px锛夛紱棰滆壊锛?fff锛沚ox-shadow:0030px10pxrgba(0,0,0,.3);}
