鍦–SS涓紝鏂囨湰鏄垜浠瘡澶╅兘瑕佹墦浜ら亾鐨勪竴澶х被銆傛湁浜嗘枃瀛楋紝涓€浜涙枃瀛椾慨楗版槸蹇呰鐨勩€傝繖绡囨枃绔犱細璁蹭袱涓瘮杈冩柊鐨勬枃鏈慨楗版蹇碉紝text-decoration鍜宼ext-emphasis銆傛渶鍚庤繕浼氳瑙ｄ竴浜涙湁瓒ｇ殑鐢ㄨ儗鏅ā鎷熶笅鍒掔嚎鏂囧瓧鐨勫姩鎬佹晥鏋溿€倀ext-decorationtext-decorationtext-decoration鎰忔€濇槸鏂囨湰瑁呴グ锛屽畠瀛樺湪浜庡緢鏃╃殑瑙勮寖CSSLevel2(Revision1)--text-decoration銆傛瘮濡傛垜浠潪甯哥啛鎮夌殑涓嬪垝绾縯ext-decoration:underline銆俻{text-decoration:underline;}鍜屾瘮杈冩柊鐨凜SS鏂囨湰瑁呴グ妯″潡Level3-text-decoration,text-decoration宸茬粡姣旇緝涓板瘜鍜屾洿鏂颁簡锛岃繘鍖栦簡text-decoration-line,text-decoration-color,text-decoration-style,text-decoration-thickness绛夊皻鏈垚涓烘爣鍑嗙殑灞炴€ф槸瀹冧滑鐨勭畝绉般€傚叾涓細text-decoration-line锛氭帶鍒剁敤浜庤缃厓绱犱腑鏂囨湰鐨勮楗扮被鍨嬶紝鏄湪涓嬫柟锛屼笂鏂硅繕鏄疮绌挎枃鏈瑃ext-decoration-style锛氫笉浠呬粎鏄疄绾垮疄蹇冿紝绫讳技浜巄order-style,杩樻敮鎸丏oublesolidline,dottedline,dashedline鍜屽緢鏈夋剰鎬濈殑wavywavylinetext-decoration-color:杩欎釜寰堝ソ鐞嗚В,鎺у埗棰滆壊text-decoration-thickness:鎺у埗瑁呴グ绾跨殑绮楃粏杩欓噷鏄竴涓緢濂界殑鍥撅紝甯姪澶у蹇€熺悊瑙ｏ細CodePenDemo--Text-decorationDemotext-decoration-line鍙互鍚屾椂璁剧疆銆傛湁瓒ｇ殑涓€鐐规槸text-decoration-line鍙互鍚屾椂璁剧疆銆俻{text-decoration-line:overlineunderlineline-through;}鎴戜滑鍙互寰楀埌涓婇潰銆佷笅闈€佷笅闈笁琛屻€倀ext-decorationcanbetransitionedandanimatedtext-decoration鐨勬瘡涓€奸兘鍙互杞崲鍜屽姩鐢汇€傚悎鐞嗕娇鐢紝鍦ㄤ竴浜涘己璋冩枃瀛楃殑鍦版柟锛屾槸闈炲父鏈夌敤鐨勩€?pclass="transition">Loremipsumdolor
.transition{text-decoration-line:underline;鏂囧瓧瑁呴グ棰滆壊锛氶€忔槑锛涙枃瀛楄楗板帤搴︼細0.1em锛涙父鏍囷細鎸囬拡锛涜繃娓★細銆?绉掞紱&:hover{鏂囨湰瑁呴グ棰滆壊锛氱矇鑹诧紱鏂囧瓧瑁呴グ鍘氬害锛?.15em锛涢鑹诧細绮夎壊锛泒}缁撳悎鍙︿竴涓睘鎬ext-underline-offset锛屾垜浠繕鍙互瀹炵幇濡備笅鍥捐繖鏍锋湁瓒ｇ殑鏁堟灉锛氬綋鐒讹紝涓婇潰鐨勪緥瀛愪娇鐢ㄤ簡text-underline-offset鐨勫彉鎹紝浣嗘槸CSS鏈韩骞朵笉鏀寔鏂囧瓧鐨勮繃娓″姩鐢?涓嬪垝绾垮亸绉婚噺銆傚湪杩欓噷锛宼ext-underline-offset鐨勮繃娓″姩鐢绘槸鍊熷姪CSS@property宸у瀹炵幇鐨勶紝鏈夊叴瓒ｇ殑鍙互杩涗竴姝ヤ簡瑙SS@property鐨勭敤娉曘€侰odePenDemo--鏂囧瓧涓嬪垝绾胯繃娓″姩鐢绘晥鏋渢ext-decoration-color鍜宑olorseparationtext-decoration-colorandcolor鍙互涓嶅悓锛岀被浼艰繖涓€?color{鏂囧瓧瑁呴グ椋庢牸锛氭尝娴舰锛涙父鏍囷細鎸囬拡锛涜繃娓★細.5s锛?:hover{棰滆壊锛氶€忔槑锛涙枃瀛楄楗伴鑹诧細绮夌孩鑹诧紱鏈夎叮鐨勬槸锛屽湪杩欎箣鍚庯紝鎴戜滑瀹為檯涓婂緱鍒颁簡涓€鏉℃尝娴嚎銆傚鏋滄垜浠湪璇ュ厓绱犵殑浼厓绱犱笂鍔犱笂娉㈡氮涓嬪垝绾匡紝鐒跺悗鍦ㄦ偓鍋滄椂鍔犱竴涓姩鐢昏娉㈡氮绾跨Щ鍔紝鎴戜滑灏卞緱鍒颁簡涓€涓緢濂界殑鎮仠鏁堟灉锛?pclass="animation"data-content="LoremibsumdolorLoremibsumdolor">Loremibsumdolor.animation{position:relative;鏂囧瓧淇グ锛氭棤锛涙孩鍑猴細闅愯棌锛涙父鏍囷細鎸囬拡锛涜楂橈細2锛?::before{鍐呭锛氬睘鎬э紙鏁版嵁-鍐呭锛夛紱浣嶇疆锛氱粷瀵癸紱椤堕儴锛?锛涘乏锛?锛涢鑹诧細閫忔槑锛涚┖鐧斤細nowrap锛涙枃鏈楗扮嚎锛氫笅鍒掔嚎锛涙枃瀛楄楗伴鏍硷細娉㈡氮褰紱鏂囧瓧瑁呴グ棰滆壊锛?000锛泎-鎸囨暟锛?1锛泒&:hover::before{鍔ㄧ敾锛氱Щ鍔?s鏃犻檺绾挎€э紱}}@keyframes绉诲姩{100%{鍙樻崲锛氬钩绉伙紙-209px锛?锛夛紱}}鎴戜滑娣诲姞浜嗕竴娈垫瘮鏂囧瓧鏈韩杩橀暱鐨勬枃瀛楋紝棰滆壊鏄€忔槑鐨勶紝浣嗘槸璁剧疆浜嗘尝娴嚎鐨勯鑹诧紝鐒跺悗鎮仠鐨勬椂鍊欙紝浣跨敤motion浼厓绱犵殑骞崇Щ鏉ョЩ鍔ㄦ尝娴嚎锛岀◢寰皟鏁翠竴涓媡ranslate鐨勫€煎氨鍙互瀹炵幇鍔ㄧ敾棣栧熬鐩歌繛锛岃揪鍒扮Щ鍔ㄦ尝娴嚎鐨勬晥鏋溿€侰odePenDemo--text-decorationDemotext-emphasisText-emphasis琛ㄧず鏂囨湰寮鸿皟锛屾槸CSSTextDecorationModuleLevel3鏂板鐨勫睘鎬э紝鐢ㄤ簬澧炲己鏂囨湰寮鸿皟鐨勬晥鏋溿€傚湪鏃╂湡锛屽鏋滄垜浠兂寮鸿皟鍑犱釜瀛楋紝鎴戜滑鍙兘浼氫娇鐢ㄦ洿甯歌鐨勬枃鏈牱寮忥紝渚嬪绮椾綋鍜屾枩浣擄細{font-weight:bold;//绮椾綋font-style:italic;//Italics}鐜板湪锛屾湁涓€绉嶆湁瓒ｇ殑寮鸿皟鏂瑰紡鈥斺€攖ext-emphasis銆倀ext-emphasis璇硶text-emphasis鍖呮嫭text-emphasis鍜宼ext-emphasis-position锛屽厑璁告垜浠湪鏂囨湰鐨勪笂鏂规垨涓嬫柟娣诲姞涓嶅悓鐨勫己璋冭楗板拰涓嶅悓鐨勯鑹层€傜湅涓€涓畝鍗曠殑demo锛?p>杩欎釜鏄?span>Text-emphasis銆?/p>pspan{text-emphasis:circle;}text-emphasis:circle鐨勪綔鐢ㄦ槸缁欏寘瑁圭殑鏂囧瓧锛屽湪Aboveit涓紝娣诲姞涓€涓猚irclegraphic锛屽嵆鍦嗗舰鍥惧舰锛屾晥鏋滃涓嬶細褰撶劧榛樿鏄粦鑹茬殑锛屾垜浠彲浠ュ湪鍦嗗悗闈㈡坊鍔犻鑹诧細pspan{text-emphasis:circle#f00;}闄や簡鍦嗭紝瀹冭繕鎻愪緵浜嗗绉嶅浘褰㈠彲浠ラ€夋嫨锛岃繕鍙互鑷畾涔変紶鍏ョ殑瀛楃锛岀敋鑷虫槸emoji琛ㄦ儏锛?p>ABCD
EFGHIJKLMN.keyword{text-emphasis:circle#f00;}.word{text-emphasis:'x'blue;}.emoji{text-emphasis:'馃構';}text-emphasis-positionsyntax闄や簡鍦ㄦ枃瀛椾箣涓婏紝杩樺彲浠ュ湪涓€瀹氳寖鍥村唴鏀瑰彉寮鸿皟鍥惧舰鐨勪綅缃紝閫夋嫨鏀惧湪涓婇潰鎴栬€呭湪鏂囨湰涓嬫柟锛屽苟浣跨敤鏂囨湰寮鸿皟浣嶇疆銆傝灞炴€ф帴鍙椾袱涓弬鏁帮細text-emphasis-position:[over|涓媇&&[鍙硘left]?.keyword{text-emphasis:circle#f00;}.word{text-emphasis:'x'blue;text-position:overleft;}.emoji{text-emphasis:'馃構';text-position:underleft;}褰撴枃瀛楁帓鐗堢殑涔﹀啓椤哄簭涓烘í鎺掓椂锛岀被浼间簬writing-mode:lr锛屽彧闇€瑕佷娇鐢╫ver鍜寀nder鍗冲彲銆傚綋鏂囨湰鐨勬帓鐗堝竷灞€妯″紡涓哄瀭鐩存ā寮忔椂锛岀被浼间簬writing-mode:vertical-lr锛屼娇鐢╮ight鎴杔eft鍏抽敭瀛椼€俻{writing-mode:vertical-rl;}.keyword{text-emphasis:circle#f00;}.word{text-emphasis:'x'blue;text-position:overleft;}.emoji{text-emphasis:'馃構';text-position:underright;}浣跨敤background妯℃嫙涓嬪垝绾块櫎浜咰SS鍘熺敓鎻愪緵鐨則ext-decoration鍜宼ext-emphasis锛屾垜浠繕鍙互閫氳繃鍏朵粬鍏冪礌鏉ユā鎷熶竴浜涙枃瀛楄楗版晥鏋溿€傛渶甯歌鐨勬槸鐢ㄨ儗鏅潵妯℃嫙涓嬪垝绾裤€傜湅涓€涓畝鍗曠殑DEMO锛岀敤鑳屾櫙妯℃嫙鏂囧瓧鐨勪笅鍒掔嚎鏁堟灉锛?p>Loremipsumdolorsitametconsecteturadipisicingelit銆?a>Mollitianostrumplaceatconsequaturdeseruntvelitducimuspossimuscommoditemporibusdebitisquam,molestiaelaboriosamsitrepellsedsapientequidemquodaccusantiumv鈥嬧€媏ro.p{瀹藉害锛?00px;瀛椾綋澶у皬锛?4px锛涢鑹诧細#666锛泒a{鑳屾櫙锛氱嚎鎬ф笎鍙橈紙90deg锛?0cc锛?0cc锛夛紱100%3鍍忕礌锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?00%100%锛沜olor:#0cc;}鐢ㄨ儗鏅ā鎷熸枃瀛椾笅鍒掔嚎鏁堟灉锛屾晥鏋滃浘濡備笅锛氭垨鑰咃紝鐢ㄨ儗鏅ā鎷熻櫄绾夸笅鍒掔嚎锛歛{background:linear-gradient(90deg,#0cc50%,閫忔槑50%,閫忔槑1px);鑳屾櫙澶у皬锛?0px2px锛涜儗鏅噸澶嶏細閲嶅-x锛沚ackground-position:100%100%;}CodePenDemo--浣跨敤鑳屾櫙妯℃嫙涓嬪垝绾垮拰铏氫笅鍒掔嚎銆傚綋鐒讹紝杩欐槸鏈€鍩烘湰鐨勩€傛垜浠彲浠ュ阀濡欏湴鍒╃敤鑳屾櫙鐨勫悇绉嶅睘鎬ф潵瀹炵幇鍚勭鏈夎叮鐨勬晥鏋溿€傚阀濡欐敼鍙榖ackground-size鍜宐ackground-position瀹炵幇鏂囧瓧鎮仠鏁堟灉杩欓噷锛岄€氳繃宸у鏀瑰彉background-size鍜宐ackground-position灞炴€э紝鎴戜滑鍙互瀹炵幇涓€浜涢潪甯告湁瓒ｇ殑鏂囧瓧鎮仠鏁堟灉銆傚厛鐪嬭繖鏍蜂竴涓猟emo锛屾牳蹇冧唬鐮佷綔鐢ㄤ簬琚?p>鏍囩鍖呰９鐨?a>鏍囩锛?p>Loremipsumdolorsitametconsecteturadipisicingelit銆?a>Mollitianostrumplaceatconsequaturdesertvelitducimuscommoditemporibusdebitisquam锛宮olestiaelaboriosamsitrepellendussedsapientequidemquodaccusantiumv鈥嬧€媏ro.a{鑳屾櫙锛氱嚎鎬ф搴︼紙90deg锛?ff3c41锛?fc0,#0ebeff);鑳屾櫙澶у皬锛?3px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?100%锛涜繃娓★細鍏ㄩ儴涓?锛涢鑹诧細#0cc;}a:hover{鑳屾櫙澶у皬锛?00%3px;color:#000;}铏界劧鎴戜滑璁剧疆浜嗚儗鏅細linear-gradient(90deg,#ff3c41,#fc0,#0ebeff)锛屼絾鏄畠榛樿鐨刡ackground-size:03px寮€澶达紝涔熷氨鏄笅鍒掔嚎澶勭湅涓嶅埌涓€寮€濮嬶紝鍦ㄦ偓鍋滅殑鏃跺€欙紝鏀瑰彉background-size:100%3px锛岃繖鏃跺€欎細鍑虹幇浠?3px鍒?00%3px鐨勫彉鎹紝杩欐槸浠庡ご寮€濮嬬殑鎷変几鏁堟灉銆傜湅鏈€缁堟晥鏋滐細鐢变簬璁剧疆鐨刡ackground-position涓?100%锛屽鏋滆缃殑background-position涓?00%100%锛屾垜浠彲浠ュ緱鍒扮浉鍙嶇殑鏁堟灉锛?/鍏朵粬涓嶅彉锛屽彧鏀瑰彉background-position锛屼粠0100%鍙樹负100%100%a{...鑳屾櫙浣嶇疆锛?00%100%锛?..}鍐嶇湅鐪嬫晥鏋滐紝鍙互瀵规瘮涓€涓嬩笂闈㈢殑鍔ㄧ敾锛岀湅鐪嬪叿浣撳尯鍒湪鍝噷锛欳odePenDemo--鑳屾櫙涓嬪垝绾垮姩鐢籓K锛屽鏋滄垜浠敤鑳屾櫙瀹炵幇涓ゆ潯閲嶅彔鐨勪笅鍒掔嚎锛岀劧鍚庝娇鐢ㄤ笂闈袱涓笉鍚岀殑background-position鍊硷紝鎴戜滑鍙互寰楀埌涓€涓洿鏈夎叮鐨勪笅鍒掔嚎鎮仠鏁堟灉銆侰SS浠ｇ爜鏄剧ずbackground妯℃嫙鐨勪袱鏉′笅鍒掔嚎鐨刡ackground-position鐨勫€间笉鍚岋細a{background:linear-gradient(90deg,#0cc,#0cc),linear-gradient(90deg,#ff3c41,#fc0,#8500d8);鑳屾櫙澶у皬锛?00%3px锛?3px锛涜儗鏅噸澶嶏細涓嶉噸澶嶏紱鑳屾櫙浣嶇疆锛?00%100%锛?100%锛涜繃娓★細鍏ㄩ儴0.5s锛涢鑹诧細#0cc锛泒a:hover{鑳屾櫙澶у皬:03px,100%3px;color:#000;}灏卞彲浠ュ緱鍒拌繖鏍风殑鏁堟灉锛屽叾瀹炴瘡娆℃偓鍋滅殑鏃跺€欙紝閮芥湁涓ゆ潯涓嬪垝绾垮湪绉诲姩锛氭垜浠嬬粛浜嗘枃鏈楗扮殑涓€浜涙湁瓒ｇ殑灞炴€у拰鍔ㄦ€佹晥鏋溿€傚笇鏈涘浣犳湁鎵€甯姪:)濡傛灉浣犳兂鑾峰彇鏈€鏈夎叮鐨凜SS璧勬枡锛屼笉瑕侀敊杩囨垜鐨勫叕浼楀彿鈥斺€攊CSS鍓嶇瓒ｉ椈馃槃鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github鈥斺€攊CSS锛屼笉鏂洿鏂般€傛杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>
