/div>.g-container{浣嶇疆锛氱浉瀵癸紱瀹藉害锛?00px锛涢珮搴︼細100px锛?g-content{楂樺害锛?00px锛?g-filter{楂樺害锛?00px锛涜儗鏅細寰勫悜娓愬彉锛堝渾褰?0%-10px锛岄€忔槑0锛岄€忔槑39px锛?00040px锛?000锛夛紱}}}寰楀埌杩欎箞涓€涓畝鍗曠殑鍥惧舰锛氱湅鍒拌繖閲岋紝浣犺偗瀹氫細濂囨€负浠€涔堣繖涓浘褰㈤渶瑕佸祵濂?灞俤iv锛熶竴涓猟iv杩樹笉澶熷悧锛熻繖鏄洜涓烘垜浠啀娆′娇鐢╢ilter:contrast()鍜宖ilter:blur()鐨勭濂囩粍鍚堛€傛垜浠畝鍗曚慨鏀逛竴涓嬩笂闈㈢殑浠ｇ爜锛屼粩缁嗚瀵熶竴涓嬪拰涓婇潰CSS鐨勫紓鍚岀偣锛氬搴︼細300px锛涢珮搴︼細100px锛?g-content{楂樺害锛?00px锛涜繃婊ゅ櫒锛氬姣斿害锛?0锛夛紱鑳屾櫙鑹诧細鐧借壊锛涙孩鍑猴細闅愯棌锛?g-filter{杩囨护鍣細妯＄硦锛?0px锛夛紱楂樺害锛?00px锛涜儗鏅細寰勫悜娓愬彉锛堝渾褰?0%-10px锛岄€忔槑0锛岄€忔槑29px锛?00040px锛?000锛夛紱鎴戜滑鍦?g-content涓坊鍔犱簡filter:contrast(20)鍜宐ackground-color:white锛屽湪.g-filter涓坊鍔犱簡filter:blur(10px)銆傜濂囩殑浜嬫儏鍙戠敓浜嗭紝鎴戜滑寰楀埌浜嗚繖鏍蜂竴涓晥鏋滐細閫氳繃contrastfilter锛屾秷闄や簡楂樻柉妯＄硦鐨勬ā绯婅竟缂橈紝鍘熸潵鐨勭洿瑙掑彉鎴愪簡鍦嗚锛孉mazing銆傞€氳繃涓€寮燝if鍥剧墖鏇寸洿瑙傜殑鎰熷彈锛氳繖閲屾湁鍑犱釜缁嗚妭闇€瑕佹敞鎰忥細.g-content灞傞渶瑕佽缃负background鍜宱verflow:hidden锛堝彲浠ヨ嚜宸卞皾璇曞幓鎺夌湅鐪嬫晥鏋滐級鍜屽闈㈢殑鐩磋涔熷彉鎴愪簡鍦嗚鏍规嵁涓婇潰绗簩鐐癸紝澶栭潰鐨勭洿瑙掍篃鍙樻垚浜嗗渾瑙掋€傚鏋滄兂璁╄繖涓渾瑙掍篃鏄洿瑙掞紝杩樻湁涓€灞?g-container銆傛垜浠彲浠ュ湪杩欎竴灞傛坊鍔犱竴涓吉鍏冪礌鏉ユ坊鍔犺浠ョ洿瑙掕鐩栵細.g-container{&::before{content:"";浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛泎-绱㈠紩锛?锛涜儗鏅細寰勫悜娓愬彉锛堝渾褰?0%-10px锛岄€忔槑0锛岄€忔槑60px锛?00060px锛?0000锛夛紱}}鎴戜滑鍙互寰楀埌鍙湁涓棿閮ㄥ垎鏄嚬鍦嗚锛屽叾浠栧洓涓閮芥槸鐩磋鐨勬晥鏋滐細瀹屾垚浠ｇ爜鍙互鐐硅繖閲岋細CodePenDemo-SmoothconcaveroundedcornersByfilter褰撶劧锛岀敱浜庢ā绯婃护闀滃簲鐢ㄥ埌涓婇潰鍏夋粦鐨勫嚬鍦嗚锛屼笉寤鸿鍦ㄩ噷闈㈡斁缃瓺OM銆傛渶濂界敤浣滆儗鏅紝鍐呴儴鍐呭鍙互鐢ㄥ叾浠栨柟寮忓彔鍔犲湪涓婇潰鍗冲彲銆傚叧浜巉ilter:contrast()鍜宖ilter:blur()鐨勭濂囪瀺鍚堟晥鏋滐紝浣犲彲浠ョ偣寮€杩欑瘒鏂囩珷浜嗚В鏇村鈥斺€斾綘涓嶇煡閬撶殑CSS婊ら暅鎶€宸у拰缁嗚妭锛屾渶缁堝疄鐜板嚬鍦嗘粦鐨勫渾瑙掕繖绡囨枃绔犵殑銆傝繕鏈夊叾浠栧嚑绉嶆柟娉曪紝鏈川涓婁笌鏈枃绗竴绉嶆柟娉曠被浼笺€傞兘鏄彔鍔犺挋鐪肩殑鏂规硶锛屽氨涓嶄竴涓€鍒椾妇浜嗐€傛湰鏂囩殑鏍稿績鐩殑鏄粙缁嶇浜岀杩囨护鏂瑰紡銆傚ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)鎯宠鑾峰彇鏈€鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈杞朵簨馃槃鏇村绮惧僵CSS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屾寔缁洿鏂帮紝娆㈣繋鐐逛釜鏄熻闃呮敹钘忋€傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>