鏈枃灏嗛€氳繃涓€涓疄闄呯殑涓氬姟闇€姹傛潵璁茶В濡備綍鍦ㄦ瀬绔満鏅笅瀹炵幇鏂囧瓧绮椾綋鍔犺竟妗嗙殑鏁堟灉鍙岀矖浣撲粖澶╅亣鍒颁簡杩欐牱涓€涓湁瓒ｇ殑闂锛氬湪鏄剧ず鏂囧瓧鐨勬椂鍊欙紝鎴戜娇鐢ㄤ簡font-weight:bold鎶婃枃瀛楀姞绮楋紝浣嗘垜杩樻槸瑙夊緱涓嶅绮椼€傛湁娌℃湁鍔炴硶璁╂枃瀛楀彉绮楋紵emm锛屽鏋滀笉鑰冭檻鍏煎鎬х殑璇濓紝绛旀鏄彲浠ヤ娇鐢ㄦ枃鏈殑-webkit-text-stroke灞炴€э紝璁╂枃鏈啀娆″姞绮椼€俒MDN-webkit-text-stroke]()锛氳灞炴€т负鏂囨湰瀛楃娣诲姞杈规锛堟弿杈癸級锛屾寚瀹氳竟妗嗙殑瀹藉害鍜岄鑹诧紝瀹冩槸-webkit-text-stroke-width鍜?webkit-text-stroke-color灞炴€х殑缂╁啓銆傜湅涓嬮潰鐨凞EMO锛屾垜浠彲浠ヤ娇鐢?webkit-text-stroke灏嗘枃瀛楀姞绮椾袱娆★細
BoldtextCSS
BoldtextCSS
BoldtextCSS
CSS
p{瀛椾綋澶у皬锛?8px锛涘瓧姣嶉棿璺濓細6px锛泒p:nth-child(2){font-weight:bold;}p:nth-child(3){-webkit-text-stroke:3pxred;}p:nth-child(4){-webkit-text-stroke:3px#000;}瀵规瘮涓嬮潰4涓枃瀛楋紝鏈€鍚庝竴涓娇鐢╢ont-weight:bold鍜?webkit-text-stroke锛岃鏂囧瓧鍙樼矖銆侰odePenDemo--font-weight:boldand-webkit-text-stroke濡備綍缁欎袱鍊嶅姞绮楃殑鏂囧瓧鍔犱笂杈规锛烵K锛屼笂闈㈢殑绗竴姝ュ凡缁忓畬鎴愪簡锛屼簨鎯呰繕娌℃湁缁撴潫锛屾洿鍙€曠殑闂鏉ヤ簡銆傜幇鍦ㄦ枃鏈渶瑕佸姞绮椾袱娆★紝骞舵坊鍔犱笉鍚岄鑹茬殑杈规銆傛垜浠娇鐢ㄤ簡-webkit-text-stroke灞炴€э紝瀹冨彲浠ヤ负鏂囨湰娣诲姞杈规锛屾墍浠ヤ簨鎯呭彉寰楁湁鐐规鎵嬨€傝繖涓棶棰樹篃鍙互杞寲涓猴紝濡備綍缁欐枃瀛楁坊鍔?灞備笉鍚岄鑹茬殑杈规锛熷綋鐒讹紝杩欎笉鏄己澶SS锛圫VG锛夌殑闂锛屾垜浠潵璇曡瘯鍚с€傚皾璇曟柟娉曚竴锛氫娇鐢ㄦ枃鏈吉鍏冪礌鏀惧ぇ鏂囧瓧绗竴绉嶅皾璇曟柟娉曟湁鐐圭箒鐞愩€傛垜浠彲浠ュ姣忔鏂囧瓧杩涜寰皟锛屽埄鐢ㄦ枃瀛楃殑浼厓绱犲皢鏂囧瓧绋嶅井鏀惧ぇ锛屽皢鍘熸枃鍜孎inder涔嬪悗鐨勬枃瀛楃矘璐村湪涓€璧枫€傚皢鏂囨湰鎷嗗垎涓哄崟鐙殑鍏冪礌銆傚埄鐢ㄤ吉鍏冪礌鐨刟ttr()鐗规€у疄鐜板悓瀛楁斁澶с€備吉鍏冪礌鐨勮瘝鍙犲姞鍦ㄥ師鏂囩殑涓嬮潰銆備唬鐮侊細
ul{鏄剧ず锛歠lex;flex-wrap:nowrap;}li{浣嶇疆:鐩稿;瀛椾綋澶у皬锛?4px锛涘瓧姣嶉棿璺濓細6px锛涘瓧浣撶矖缁嗭細绮椾綋锛?webkit-text-stroke:3px#000;&::before{鍐呭锛氬睘鎬э紙鏁版嵁鏂囨湰锛夛紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涘簳閮細0锛涘彸锛?锛涚孩鑹?-webkit-text-stroke:3px#f00;z-鎸囨暟锛?1锛涘彉鎹細姣斾緥锛?.15锛夛紱}}涓婇潰鐨勬晥鏋滃彲浠ョ畝鍗曠殑鍔犱釜鍔ㄧ敾锛屼竴鐪嬪氨鎳傦細CodePenDemo--浣跨敤浼厓绱犵粰绮椾綋鏂囧瓧鍔犺竟妗嗙湅璧锋潵涓嶉敊锛屼絾鍏跺疄浠旂粏瑙傚療锛岃竟妗嗘晥鏋滃緢绮楃硻锛屾枃瀛楃殑姣忎竴閮ㄥ垎閮芥病鏈夎鍒欒鐩栵紝鏁堟灉涓嶈锛氬皾璇曟柟娉曚簩锛氫娇鐢╰ext-shadow妯℃嫙杈规绗竴绉嶆柟娉曞け璐ワ紝鎴戜滑缁х画灏濊瘯绗簩绉嶆柟娉曪紝浣跨敤text-shadow妯℃嫙杈规鎴戜滑鍙互涓哄弻绮椾綋鏂囨湰娣诲姞鏂囨湰闃村奖锛?p>textboldCSSp{font-size:48px;瀛楁瘝闂磋窛锛?px锛涘瓧浣撶矖缁嗭細绮椾綋锛?webkit-text-stroke:1px#000;text-shadow:002pxred;}鐪嬫晥鏋滐細鍡紝杩欎釜绂昏竟妗嗗お杩滀簡锛屾槸闃村奖銆備笉杩囦笉鐢ㄦ媴蹇冿紝text-shadow鏄敮鎸佸閲嶉槾褰辩殑锛屾垜浠妸涓婇潰鐨則ext-shadow鍙犲姞鍑犳锛歱{font-size:48px;瀛楁瘝闂磋窛锛?px锛涘瓧浣撶矖缁嗭細绮椾綋锛?webkit-text-stroke:1px#000;-鏂囧瓧闃村奖锛?02px绾㈣壊锛?鏂囧瓧闃村奖锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02px绾㈣壊锛?02pxred;}鍝囧摝锛屼笉浠旂粏鐪嬶紝鐢ㄨ繖绉嶅彔鍔犲灞傛枃瀛楅槾褰辩殑鏂瑰紡锛岀湡鐨勫緢鍍忚竟妗嗭紒褰撶劧锛屽鏋滄垜浠斁澶х殑璇濓紝鐟曠柕浼氭洿鏄庢樉锛岃繕鏄彲浠ョ湅鍒板奖瀛愶細CodePenDemo--浣跨敤text-shadow缁欐枃瀛楁坊鍔犺竟妗嗗皾璇曟柟娉曚笁锛氫娇鐢ㄥ娆rop-shadow()鏉ュ皾璇曟枃瀛?shadow涔嬪悗锛屽緢鑷劧鐨勬兂鍒板涓猣ilter锛歞rop-shadow()锛屼富瑙備笂璁や负澶氫釜text-shadow鐨勬晥鏋滃簲璇ユ槸涓€鑷寸殑銆傜劧鑰岋紝瀹炶返鍑虹湡鐭ャ€傚湪瀹為檯娴嬭瘯涓彂鐜颁娇鐢╢ilter:drop-shadow()鐨勬晥鏋滄瘮澶氫釜text-shadow鏇村ソ锛屾ā绯婁細寮变竴浜涳細p{font-weight:bold;-webkit-鏂囧瓧鎻忚竟锛?px#000锛涜繃婊ゅ櫒锛氶槾褰憋紙000.25px绾㈣壊锛夐槾褰憋紙000.25px绾㈣壊锛夐槾褰憋紙000.25px绾㈣壊锛夐槾褰憋紙000.25px绾㈣壊锛夐槾褰憋紙000.25px绾㈣壊)闃村奖(000.25px绾㈣壊)闃村奖(000.25px绾㈣壊)闃村奖(000.25px绾㈣壊)闃村奖(000.25px绾㈣壊)闃村奖(000.25pxred)drop-shadow(000.25pxred);}鏁堟灉濡備笅锛氭垜浠敋鑷冲彲浠ョ敤瀹冨湪鏂囧瓧鍔犵矖涓ゆ鍚庡埗浣滃涓竟妗嗭細p{font-weight:bold;-webkit-鏂囧瓧鎻忚竟锛?px#000锛沠ilter:drop-shadow(000.2pxred)//閲嶅N娆rop-shadow(000.2pxred)drop-shadow(000.25pxblue)//閲嶅N娆rop-shadow(000.25pxblue);}鏁堟灉濡備笅锛氫絾鏄湪涓嶅悓鐨勫睆骞曚笅锛堥珮娓呭睆鍜屾櫘閫氬睆锛夛紝drop-shadow()鐨勮〃鐜版湁寰堝ぇ鐨勪笉鍚岋紝鍏跺疄寰堥毦澶嶇敤銆傛垜浠彲浠ュ仛浜涗粈涔堝悧锛熶笉锛岃繕鏈夌粓鏋佹潃鎵嬬骇鍔熻兘SVG銆傚皾璇曟柟娉曞洓锛氫娇鐢⊿VGfeMorphology婊ら暅缁欐枃瀛楁坊鍔犺竟妗嗗叾瀹炰娇鐢⊿VGfeMorphology婊ら暅鍙互瀹岀編婊¤冻杩欎釜闇€姹傘€傛垜瀵硅繖椤规妧鏈緢鎰熷叴瓒ｏ紒涓嶈鍒欒竟妗嗙殑鐢熸垚鏂规鍦ㄨ繖绡囨枃绔犱腑涔熸湁鎻愬埌銆傚€熺敤feMorphology鐨勬墿灞曡兘鍔涳紝涓轰笉瑙勫垯褰㈢姸娣诲姞杈规銆傜洿鎺ヤ笂浼犱唬鐮侊細
绮椾綋鏂囨湰CSS
p{瀛椾綋澶у皬锛?4px锛涘瓧姣嶉棿璺濓細6px锛涘瓧浣撶矖缁嗭細绮椾綋锛?webkit-text-stroke:2px#000;filter:url(#dilate);}鏁堟灉濡備笅锛氭垜浠彲浠ヤ娇鐢⊿VG鐨刦eMorphology婊ら暅锛宺adius鎺у埗杈规澶у皬锛宖eFlood婊ら暅涓殑flood-color鎺у埗杈规棰滆壊銆傝€屼笖杩欓噷鐨凷VG浠ｇ爜鍙互浠绘剰鏀剧疆锛屽彧闇€瑕佸湪CSS涓娇鐢╢ilter瀵煎叆鍗冲彲銆傛湰鏂囦笉瀵筍VG婊ら暅鍋氳繃澶氳В閲娿€傚鏋滀綘瀵筍VG婊ら暅鐨勫師鐞嗘劅鍏磋叮锛屽彲浠ョ湅鎴戜笂闈㈡彁鍒扮殑閭ｇ瘒鏂囩珷銆傝嚦姝わ紝鎴戜滑宸茬粡鍦ㄤ娇鐢╢ont-weight:bold鍜?webkit-text-stroke鐨勫熀纭€涓婂畬缇庡疄鐜颁簡缁欐枃瀛楁坊鍔犱笉鍚岄鑹茶竟妗嗙殑闇€姹傘€傛斁澶х湅鐪嬭繖鏍风敓鎴愮殑杈规鏄湡瀹炵殑杈规锛屾病鏈変换浣曟ā绯婏細CodePenDemo--浣跨敤SVGfeMorphologyfilter缁欐枃瀛楁坊鍔犺竟妗嗘渶鍚嶰K锛屾湰鏂囧埌姝ょ粨鏉燂紝浠嬬粛涓€浜涢瓟鏈湪CSS涓緢宸у鐨勫疄鐜颁簡鏂囨湰鍔犵矖涓ゆ鍚庨渶瑕佸姞杈规銆傚疄闄呴渶姹備腑锛屽鏋滀笉闇€瑕佷换浣曚竴涓瘝鏈夎繖绉嶆晥鏋滐紝鍏跺疄鎴戞洿鎺ㄨ崘鍒囧浘澶х殑鏂规硶锛岄珮淇濈湡锛屼笉涓㈠け缁嗚妭銆傚綋鐒讹紝鍙兘杩樻湁鏇存柟渚挎湁瓒ｇ殑瑙ｅ喅鏂规锛屾杩庤瘎璁哄尯澶氬璧愭暀銆傚笇鏈涜繖绡囨枃绔犲浣犳湁鎵€甯姪:)濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇濂囬椈馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屼細鎸佺画鏇存柊锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
