浠婂ぉ鏉ョ湅涓€涓緢甯歌鐨勪氦浜掞細tooltips銆傞€氬父鎻愮ず妗嗘槸绾壊鐨勩€備緥濡傦紝涓嬮潰鐨勫竷灞€瀹炵幇骞朵笉澶鏉傘€傚畠鍙互鐢变竴涓渾瑙掔煩褰㈠拰涓€涓皬涓夎褰㈡嫾鎺ヨ€屾垚銆傝缃浉鍚岀殑棰滆壊灏辫冻澶熶簡銆傝繖涓嶆槸鏈枃鐨勯噸鐐广€傚鏋滀綘鏈夊叴瓒ｅ彲浠ヨ闂甤ss-tips(codepen.io)鏈夋椂鍊欙紝涓轰簡绐佸嚭浜у搧鐨勭壒鐐规垨鑰呮槸涓轰簡椤哄簲璁捐鐨勬疆娴侊紝璁捐涓細浣跨敤娓愬彉鑳屾櫙銆傛瘮濡俵uluUIEdge鐗堟湰涓殑Tips缁勪欢濡傛灉杩樻槸閲囩敤鈥滄嫾鎺モ€濈殑鏂瑰紡锛岄毦鍏嶄細鍑虹幇鏃犳硶杩炴帴鐨勯棶棰橈紝鏈夋槑鏄剧殑鈥滃垎绂烩€濇劅锛岃瑙夎繕鍘熷ぇ澶у噺灏戙€傞偅涔堬紝濡備綍瀹炵幇杩欑鏁堟灉鍛紵涓€璧锋潵鐪嬬湅鍚?.Clip-pathClip-pathClipping-path鍙兘鏄緢澶氫汉绗竴鏃堕棿灏辫兘鎯冲埌鐨勬柟寮忋€備絾鏄湪瀹為檯鎿嶄綔涓紝杩樻槸浼氶亣鍒板緢澶氶夯鐑lip-path:path鍙互鏀寔浠绘剰褰㈢姸锛屼絾鏄笉鑳藉疄鐜拌嚜閫傚簲瀹介珮clip-path:polygon鍙互瀹炵幇灏忓皷瑙掞紝浣嗘槸涓嶈兘瀹炵幇鍦嗚clip-path:inset鍙互瀹炵幇鑷€傚簲鍦嗚鐭╁舰锛屼絾鏄笉鑳藉疄鐜颁笅闈㈢殑灏忓皷瑙掋€傚浣曡В鍐宠繖涓棶棰樺憿锛熷叾瀹炲彲浠ユ妸2鍜?缁撳悎璧锋潵锛岃繖閲岄渶瑕佷袱涓ぇ灏忕浉鍚岀殑瀹瑰櫒锛屽彲浠ョ敤::before鍜?:after浠ｆ浛锛岀劧鍚庤缃浉鍚岀殑鑳屾櫙鑹诧紝鍙互閫氳繃鑷畾涔夊睘鎬ф潵瀹氫箟銆傛彁绀簕浣嶇疆锛氱浉瀵?--bg:linear-gradient(45deg,#ff3c41,#ff9800);}.tips::before,.tips::after{content:'';浣嶇疆锛氱粷瀵癸紱瀹藉害锛?00%锛涢珮搴︼細100%锛涘乏锛?锛涢《閮細0锛涜儗鏅細var(--bg);/*瀹屽叏鐩稿悓鐨勮儗鏅?/z-index:-1;}涓轰粈涔堣浣跨敤涓や釜鐩稿悓澶у皬鐨勫鍣紵杩欐槸涓轰簡淇濊瘉瑁佸壀鏃舵笎鍙樿儗鏅畬鍏ㄥ尮閰嶏紝鐒跺悗鍏朵腑涓€涓鍓垚鍦嗚鐭╁舰锛屽彟涓€涓鍓垚灏忎笁瑙掑舰锛岀劧鍚庨噸鍙犮€倀ips::before{clip-path:inset(005px0round5px);/*round鍙互璁剧疆鍦嗚*/}.tips::after{clip-path:polygon(calc(50%-5px)calc(100%-5px),calc(50%+5px)calc(100%-5px),50%100%);/*瀹炵幇涓€涓皬涓夎褰紝鍙渶瑕?涓偣鐨勫潗鏍?/}鍙互鐪嬪埌鎻愮ず妗嗘槸瀹屽叏鑷€傚簲鐨勶紝瀹炴椂鏁堟灉濡備笅瀹屾暣浠ｇ爜鍙互璁块棶tooltips-clip-path(codepen.io)2.Maskmask闄や簡clip-path锛宮ask涔熸槸涓€绉嶆€濊矾銆傚鏋滀綘瀵筸ask涓嶇啛鎮夛紝鍙互鍙傝€冭繖绡囩簿褰╃殑CSSMASK锛坖uejin.im锛夈€傝繖閲岀殑鍘熺悊濡備笅銆備娇鐢╩ask锛岀幇鍦ㄧ殑闂灏卞彉鎴愪簡锛氬浣曢€氳繃CSS缁樺埗杩欐牱鐨勫浘褰紵1.涓囪兘鐨勬笎鍙樻病鏈塁SS娓愬彉鐢讳笉鍑虹殑鍥惧舰锛岃繖寮犱篃涓嶄緥澶栥€傞鍏堟垜浠杩欎釜鍥惧舰杩涜鍒嗚В锛屽彲浠ュ垎涓哄渾瑙掔煩褰㈠拰涓夎褰€備笁瑙掑舰鐩稿瀹规槗銆傞€氳繃conic-gradient鎴栬€卨inear-gradient缁樺埗鍦嗚鐭╁舰鏈夌偣楹荤儲锛屼絾鏄繕鏄彲浠ュ垎瑙ｇ殑锛屽涓嬬敱4涓緞鍚戞笎鍙樺拰2涓嚎鎬ф笎鍙樼粍鎴愶紝浠ｇ爜瀹炵幇鏄痶ips{-webkit-mask-image:/*4涓緞鍚戞笎鍙樺拰2涓嚎鎬ф笎鍙?/radial-gradient(circleat5px5px,green5px,transparent0),radial-gradient(circleat5px5px,green5px,transparent0),radial-gradient(circleat5px5px,green5px,transparent0),radial-gradient(circleat5px5px,green5px,transparent0),linear-gradient(red,red),linear-gradient(blue,blue);-webkit-mask-size:10px10px,10px10px,10px10px,10px10px,100%calc(100%-15px),calc(100%-10px)calc(100%-5px)-webkit-mask-position:宸︿笂锛屽彸涓婏紝宸?涓?px锛屽彸0涓?px锛屽乏5px锛屼笂5px锛?webkit-mask-repeat:no-repeat}鍙鏈夌偣鑰愬績锛屽彲浠ラ『鍒╃殑鍐欏嚭鏉ヤ絾鏄?..澶暱浜嗭紝閲嶅寰堝锛?涓猺adial-gradients锛夛紝鑰屼笖寰堝啑闀裤€傛湁浠€涔堝姙娉曞彲浠ヤ紭鍖栧悧锛熻繖鏄竴涓妧宸с€傚綋浣犻亣鍒版湁瑙勫緥鍦伴噸澶嶇殑浜嬫儏鏃讹紝浣犲彲浠ュ鎯虫兂閲嶅銆傚埄鐢ㄨ儗鏅殑骞抽摵鐗规€э紝鍙互鍚堢悊璁剧疆鑳屾櫙澶у皬銆傚涓嬪浘鍙互鐪嬪埌锛岃儗鏅ぇ灏忚缃负calc(100%-10px)灏卞彲浠ュ疄鐜板钩閾烘晥鏋滐紝浠ｇ爜瀹炵幇鏄痶ips{-webkit-mask-image:/*鍙渶瑕佸緞鍚戞笎鍙?/radial-gradient(circleat5px5px,green5px,transparent0),linear-gradient(red,red),linear-gradient(钃濊壊锛岃摑鑹诧級锛?webkit-mask-size:calc(100%-10px)calc(100%-15px),/*鍦嗚鐨勫ぇ灏忥紝涓夎褰㈢殑澶у皬闇€瑕佸噺鍘婚珮搴︼紝鎵€浠ュ浜?px*/100%璁＄畻(100%-15px),璁＄畻(100%-10px)璁＄畻(100%-5px);-webkit-mask-position:lefttop,left5px,5pxtop;-webkit-mask-repeat:repeat,no-repeat,no-repeat;}鏄笉鏄畝鍖栦簡寰堝锛熺劧鍚庢妸涓夎褰㈡嫾鍦ㄤ竴璧凤紝灏卞彲浠ュ緱鍒板涓嬫晥鏋溿€傚畬鏁翠唬鐮佸彲浠ヨ闂畉ooltips-mask-gradient(codepen.io)2.鑷€傚簲svg铏界劧鍋氫簡浼樺寲锛屼絾鏄笂闈㈢殑浠ｇ爜閲忚繕鏄緢鍙鐨勩€傛湁娌℃湁鏇寸畝鍗曠殑鏂规硶鍛紵鎯冲埌浜唖vg銆傘€傘€備竴鑸潵璇达紝svg璺緞鏄浐瀹氬ぇ灏忕殑锛屽彧鑳芥寜姣斾緥缂╂斁锛屼笉鑳借嚜閫傚簲涓嶈繃鍩虹鍥惧舰鏀寔鑷€傚簲锛屽彲浠ヨ缃櫨鍒嗘瘮澶у皬锛屽rx鍙互璁剧疆鐭╁舰鐨勫渾瑙掋€俽y鏈缃椂锛岄粯璁や笌rx鐩稿悓銆傝繖鏍风殑svg鏄彲浠ヨ嚜閫傚簲鐨勶紝鍦ㄦ敼鍙樺昂瀵哥殑鏃跺€欎笉浼氬彉褰紙娉ㄦ剰鍦嗚锛夈€備笅闈㈣繖涓笁瑙掑舰寰堢畝鍗曪紝鐢?polygon>鐒跺悗鐩存帴鐢╯vg鐨勪袱娈典綔涓簃ask鑳屾櫙鍗冲彲锛屽彲浠ョ敤mask-size鍜宮ask-position鍒嗗埆璁剧疆澶у皬鍜屼綅缃畉ips{-webkit-mask-image:url("鏁版嵁锛氬浘鍍?svg+xml锛?svgxmlns='http://www.w3.org/2000/svg'>"),url("data:image/svg+xml,");-webkit-mask-size:10px5px,100%calc(100%-5px);-webkit-mask-repeat:no-repeat;-webkit-mask-position:centerbottom,00;}svg浣滀负鑳屾櫙闇€瑕佸湪鍓嶉潰鍔犱笂data:image/svg+xml锛屽唴瀹归渶瑕佽浆涔夛紝鍏蜂綋鍙互鍙傝€冭繖绡囨枃绔狅細瀛︿範锛孋SS寰堝ソ锛屽唴鑱擲VG鍥惧儚姣擝ase64褰㈠紡鏇村ソ锛屼唬鐮侀噺涔熶笉澶氾紝姣旇緝瀹规槗浜嗚В涓€涓嬶紝瀹炴椂鏁堟灉濡備笅銆傚畬鏁翠唬鐮佸彲浠ヨ闂畉ooltips-mask-svg(codepen.io)3.Paint缁樺浘鍏堜粙缁嶄竴涓湭鏉ョ殑瑙ｅ喅鏂规锛孋SSpaint鍏充簬CSSpaint锛屼篃琚О涓衡€淐SS鐣岀殑鐢绘澘鈥濓紝绠€鍗曠殑杩涙潵涔熷氨鏄锛屽氨鏄敤canvas鐨勭粯鍒舵柟寮忔潵缁樺埗鑳屾櫙銆侰anvas鍑犱箮鍙互缁樺埗浠讳綍涓滆タ锛屾墍浠ヨ繖鏄竴涓洿閫氱敤鐨勮В鍐虫柟妗堛€傚鏋滄兂蹇€熶簡瑙SSpaint锛屽彲浠ュ弬鑰冭繖绡囧叆闂ㄦ枃绔狅細CSS鐢绘澘CSSPaintAPI浠嬬粛锛岀洰鍓嶅彧鏀寔Chrome锛屽吋瀹规€у涓嬩絾涓嶅奖鍝嶆垜浠涔犮€傛瘯绔熸槸鏈潵鐨勮В鍐虫柟妗堛€傛垜浠厛鐪嬬湅澶ц嚧鐨勮娉曪紝濡備笅棣栧厛锛孞S娉ㄥ唽妯″潡registerPaint//paint-tips.jsregisterPaint('tips-bg',class{paint(ctx,size,properties){//鍦ㄨ繖閲岀粯鍒惰儗鏅?璇硶绫讳技浜巆anvas}});鎺ヤ笅鏉ワ紝JS娣诲姞妯″潡CSS.paintWorklet.addModuleif(window.CSS){CSS.paintWorklet.addModule('paint-tips.js');}鏈€鍚庯紝浣跨敤paint(tips-bg)tips{-webkit-mask-image:娌规紗锛堟彁绀?bg锛夛紱/*杩欓噷鐢ㄤ綔閬僵鑳屾櫙*/}涓嬮潰鏄粯鍒舵彁绀烘銆傚鏋滆繕鏄敤mask锛岄偅涔堥棶棰樺氨鍙樻垚浜嗭細濡備綍閫氳繃canvas缁樺埗杩欐牱鐨勫浘褰紵鍦╟anvas涓紝鐩稿浜嶤SS锛岃繖绉嶅浘褰㈢畝鐩存槸灏忓効绉戯紝鍙渶瑕佺敤lineTo鍜宎rc涓ゆ潯鎸囦护灏卞彲浠ョ敾鍑烘潵銆傛渶閲嶈鐨勪竴鐐规槸杩欓噷鐨剆ize鏄疄鏃舵覆鏌撶殑锛屽彲浠ラ€氳繃size浜嗚Вcanvas銆傝繖閲屾帹鑽愬紶鏂版棴鑰佸笀鐨凜anvasAPI涓枃鏂囨。銆俛pi鍜宑ase姣攎dn鏂囨。娓呮澶氫簡銆傜粯鍒朵唬鐮佸涓嬶紙涓嬮潰鏄緢鏅€氱殑canvas浠ｇ爜锛屽叾瀹炲氨鏄繛鎺ュ嚑鏉＄嚎娈碉紝鐒跺悗鐢ㄧ函鑹插～鍏咃級registerPaint('tips-bg',class{paint(ctx,size){//ctx鏄粯鍥句笂涓嬫枃锛宻ize鏄鍣ㄥぇ灏廲onst{width,height}=size;//瀹瑰櫒澶у皬constradius=5;//鍦嗚澶у皬constdeg=Math.PI/2;constedge=5;//涓夎褰㈠ぇ灏廲onstpos=width/2;//涓夎褰綅缃甤tx.beginPath();ctx.moveTo(radius,0);ctx.lineTo(width-2*radius,0);ctx.arc(width-radius,radius,radius,-deg,0);ctx.lineTo(width,height-2*radius-edge);ctx.arc(width-radius,height-radius-edge,radius,0,deg);ctx.lineTo(pos+edge,height-edge);ctx.lineTo(pos,height);ctx.lineTo(pos-edge,height-edge);ctx.lineTo(radius,height-edge);ctx.arc(radius,height-radius-edge,radius,deg,2*deg);ctx.lineTo(0,radius-edge);ctx.arc(radius,radius,radius,-2*deg,-deg);ctx.closePath();ctx.濉厖鏍峰紡='#000';ctx.濉厖();}});瀹炴椂鏁堟灉濡備笅瀹屾暣浠ｇ爜鍙互璁块棶tooltips-mask-paint(codepen.io)鍙﹀涔熷彲浠ラ€氳繃css鍙橀噺鑷畾涔夛紝姣斿瀹氫箟涓€涓?-r涓哄渾瑙掑ぇ灏忥紝--t鏄笁瑙掑舰澶у皬registerPaint('tips-bg',class{staticgetinputProperties(){//瀹氫箟鍏佽鐨剆elfDefinepropertiesreturn['--r','--t']}paint(ctx,size,properties){//灞炴€ф槸鑷畾涔夊睘鎬onstradius=Number(properties.get('--r'));constedge=Number(properties.get('--t'));//...}})鍙互鐪嬪埌缁樺浘鏄疄鏃舵洿鏂扮殑锛堟敼鍙樺渾瑙掞級锛屼笉闇€瑕侀澶栫殑JS澶勭悊锛屽疄鏃剁殑鏁堟灉濡備笅瀹屾暣浠ｇ爜鍙互璁块棶tooltips-mask-paint-var(codepen.io)4.鎻忚竟鏁堟灉鏈夋椂鎻愮ず妗嗗彲鑳戒細鏈夋弿杈规晥鏋溿€傛瘮濡備笂闈㈢殑鏂规硶閮戒笉閫傚悎杩欑鎻忚竟锛宑lip-path鍜宮ask閮戒笉鑳藉疄鐜版弿杈癸紝浣嗘槸鏈変釜border鐢熸垚鏂规鍙互鍙傝€冿細interesting锛佷笉瑙勫垯杈规鐨勭敓鎴愭柟妗堬紙juejin.cn锛夛紝鍙儨鏁堟灉涓嶅畬缇庯紙鐣ュ井妯＄硦锛夈€傚鏋滃昂瀵稿浐瀹氾紝閭ｄ箞鍙互鐩存帴浣跨敤svg鐨勬柟寮忥紝鍙傝€冭繖绡囨枃绔狅細鐢⊿VG瀹炵幇涓€涓紭闆呯殑鎻愮ず妗嗭紙juejin.cn锛夌洰鍓嶇‘瀹炴病鏈夋洿濂界殑瀹炵幇鏂规锛堟杩庤ˉ鍏呮洿濂界殑瀹炵幇鏂规硶馃槀锛屾殏鏃舵兂涓嶅嚭鏉ワ級锛屼絾鏄湁浜咰SSpaint鐨勫府鍔╋紝涓€鍒囩殕鏈夊彲鑳斤紒浣犲彧闇€瑕佸湪paint鍑芥暟涓粯鍒惰竟妗嗗拰鑳屾櫙鍗冲彲銆傜粯鍥句唬鐮佸涓媟egisterPaint('tips-bg',class{paint(ctx,size){const{width,height}=size;//containersizeconstradius=5;//filletsizeconstdeg=Math.PI/2;const杈?5;//涓夎褰㈠ぇ灏廲onstpos=width/2;//涓夎褰㈢姸浣嶇疆constlineWidth=2;//鎻忚竟瀹藉害ctx.beginPath();ctx.moveTo(鍗婂緞+绾垮,绾垮);ctx.lineTo(width-2*radius-lineWidth,lineWidth);ctx.arc(width-radius-lineWidth,radius+lineWidth,radius,-deg,0);ctx.lineTo(width-lineWidth,height-2*radius-edge-lineWidth);ctx.arc锛堝搴?鍗婂緞-绾垮锛岄珮搴?鍗婂緞-杈?绾垮锛屽崐寰勶紝0锛屽害锛夛紱ctx.lineTo(pos+edge,height-edge-lineWidth);ctx.lineTo(pos,height-lineWidth);ctx.lineTo(pos-edge,height-edge-lineWidth);ctx.lineTo(radius+lineWidth,height-edge-lineWidth);ctx.arc(radius+lineWidth,height-radius-edge-lineWidth,radius,deg,2*deg);ctx.lineTo(绾垮,鍗婂緞+绾垮);ctx.arc(鍗婂緞+绾垮,鍗婂緞+绾垮,鍗婂緞,-2*deg,-deg);ctx.closePath();constgradient=ctx.createLinearGradient(0,0,width,0);//娓愬彉鑳屾櫙gradient.addColorStop(0,'#F57853');gradient.addColorStop(1,'#F8B578');ctx.fillStyle=娓愬彉;ctx.濉厖();ctx.strokeStyle='#FBF8F8';//缁樺埗杈规ctx.lineWidth=lineWidth;ctx.lineCap='鍦嗗舰';ctx.stroke();}});tips{/*-webkit-mask-image:paint(tips-bg);*/鑳屾櫙锛氭补婕嗭紙鎻愮ず-bg锛夛紱/*涓嶅啀渚濊禆mask锛岀函js缁樺埗鑳屾櫙锛屽寘鎷笎鍙?/}瀹炴椂鏁堟灉濡備笅瀹屾暣浠ｇ爜鍙互璁块棶tooltips-paint-stroke(codepen.io)5.鎬荤粨涓庢弿杩颁互涓婁粙缁峵ooltips甯冨眬鐨勪笁绉嶄笉鍚屽疄鐜版柟寮忥紝鍒嗗埆鏄痗lip-path銆乵ask銆丆SSpaint锛屽叾涓璵ask鐨勫疄鐜伴噸鐐瑰叾瀹炴槸CSS鍥惧舰鐨勭粯鍒躲€備富瑕佹湁娓愬彉鍜宻vg涓ょ銆傛笎鍙樼殑鍐欐硶铏界劧绋嶅井澶嶆潅涓€鐐癸紝浣嗕篃鏄渶閫氱敤鐨勶紝鍏朵粬鐨勫啓娉曚笉涓€瀹氶€傚悎涓嶅悓鐨勭増闈€傚悜涓娿€傜幇鍦ㄦ€荤粨涓€涓嬭鐐癸細澶氫釜瀹瑰櫒鍙互閫氳繃clip-path鍙犲姞瀹炵幇澶嶆潅鐨勮嚜閫傚簲鏁堟灉銆傚湪浣跨敤CSS娓愬彉缁樺埗鍥惧舰鏃讹紝鐩稿悓鐨勫舰鐘跺厖鍒嗗埄鐢ㄤ簡骞抽摵鐗规€с€係VG鍩烘湰褰㈢姸鏀寔鐧惧垎姣斿ぇ灏忥紝骞朵笖浣滀负鑳屾櫙涔熷緢鏈夋晥銆傚彲浠ヤ娇鐢ㄥ涓儗鏅粍鍚圕SSpaint鏄互鍚庢渶濂界殑瑙ｅ喅鏂规锛屽彲浠ヨ交鏉惧疄鐜版弿杈规晥鏋溿€侰SSpaint鍞竴鐨勭己闄峰氨鏄吋瀹规€т笉澶熷ソ锛堢洰鍓嶅彧鏀寔Chrome65+锛夛紝浣嗘槸鍊煎緱瀛︿範褰撶劧锛岃繖浜涙柟娉曚笉浠呬粎鏄疄鐜版湰鏂囩殑甯冨眬锛岃繕鎻愪緵涓€绉嶆€濈淮鏂瑰紡銆備笅娆″啀閬囧埌鍏朵粬鈥滃紓褰㈠竷灞€鈥濓紝鍙互椹笂鎯冲埌鐩稿簲鐨勮В鍐虫柟妗堬紝鑰屼笉鏄€夋嫨鈥渃utting.png鈥濄€傚鏋滄偍瑙夊緱杩樹笉閿欙紝濡傛灉瀵规偍鏈夊府鍔╋紝璇风偣璧烇紝鏀惰棌锛岃浆鍙戔潳鉂も潳
