一行CSS代码的魅力

时间：2023-03-30 23:45:55 CSS

涔嬪墠鍦ㄧ煡涔庝笂鐪嬪埌涓€涓湁瓒ｇ殑璁ㄨ涓€琛屼唬鐮佸彲浠ュ仛浠€涔堬紵閭ｄ箞锛屼竴琛孋SS浠ｇ爜鑳藉仛鐐逛粈涔堝悧锛烠SSBattle棣栧厛锛岃繖璁╂垜鎯宠捣浜咰SSBattle锛屼竴涓垜鍦ㄥ勾鍒濇矇杩风殑缃戠珯銆傛湰绔欑殑鏍稿績鐜╂硶鏄細瀹樻柟缁欏嚭浜嗕竴涓浘褰紝鍦ㄧ粰瀹氱殑400x300鐢诲竷涓婏紝鍙互鐢ㄨ秺鐭殑浠ｇ爜瀹炵幇瀹冿紝寰楀垎瓒婇珮銆傝娉ㄦ剰锛屽畠宸插畬鍏ㄦ仮澶嶃€傚叾涓紝绗竴涓棶棰樺緢鏈夋剰鎬濓紝鐪嬮鐩細鍡紝鎯充竴鎯筹紝濡傛灉缁欎綘杩欐牱涓€涓浘褰紝鍛婅瘔浣燞TML灏哄鏄?00pxx300px锛屽浘鐗囦腑浣跨敤鐨勯鑹叉槸#5D3A3A锛?B5E0BA锛屼綘浼氬浣曚娇鐢–SS鏉ュ疄鐜帮紵鍥犱负瑕佹眰锛屽瓧绗﹁秺灏戯紝鍒嗘暟瓒婇珮銆傚綋鐒讹紝閫夋嫨瀛楃灏戠殑鏍囩锛屼笉鏄繖鏍风殑鍚楋細

鏈綉绔欑殑璁剧疆锛孒TML鍜孋SS鍙互鎸夌収涓婇潰鐨勬牸寮忎竴璧峰啓銆?style>鏍囩閲岄潰鐨勫唴瀹规槸CSS锛屽墿涓嬬殑灏辨槸HTML銆傛爣绛?p>

褰撶劧鍙互鏄?p>鐨勭缉鍐欙紝浣嗘槸鐪嬫枃绔犳爣棰橈紝涓€琛宑ss锛熻繖鏄剧劧涓嶆槸锛岃繖閲屾湁100+涓瓧绗︺€傛垜浠繀椤诲帇缂╁瓧绗︽暟銆傚棷锛屾兂鍒颁簡闃村奖锛岃瘯璇曠敤box-shadow:鐢ㄤ袱灞傞槾褰憋紝鍥句緥鍥惧舰瀹岀編瀹炵幇锛屽瓧绗︽暟鍘嬬缉鍒?2涓€傚綋鐒惰繖涓嶆槸鏈€缁堢殑锛屾垜浠彲浠ュ唴鑱擟SS锛岀劧鍚庡噺灏戝瓧绗︽暟锛?astyle="box-shadow:000200px#b5e0ba,000400px#5d3a3a">鍙湁62涓瓧绗︺€傚綋鐒讹紝浠庝竴琛屼唬鐮佹潵鐪嬶紝杩欎釜闂灏卞畬缇庤В鍐充簡銆傚鏋滆拷姹傛瀬鑷寸殑瀛楃鏁帮紝涓婇潰鐨勪唬鐮佸彲浠ョ畝鍖栵細涓嬮潰鏄竴浜涘皬鐭ヨ瘑鐐癸紝HTML5鏀寔涓嶅甫寮曞彿鐨勫睘鎬э紝姣斿box-shadow:000400px#5d3a3a鍦–SS涓彲浠ュ帇缂╀负box-shadow:0+0+0+5in#5d3a3a,1in=96px锛屼絾鏄痗anvas鍙湁400px锛?in姣?00px澶э紝娌￠棶棰橈紝鍙互濉弧鐢诲竷锛屼絾鏄?00px姣?in澶氫簡2涓瓧绗︺€傚湪娴忚鍣ㄤ腑鐪嬶紝瀹屽叏姝ｇ‘锛歄K锛屾渶鍚庡彧鏈?6涓瓧绗︼紝瀹岀編銆傚綋鐒讹紝CSSBattle鐨勬寫鎴樹篃瓒婃潵瓒婂鏉傦紝涓€琛屼唬鐮佸氨鍙互瀹屾垚鐨勬寫鎴樻湁寰堝锛屾劅鍏磋叮鐨勫彲浠ヨ瘯璇曠湅銆備竴琛屽悗鍙颁唬鐮佽鍒癈SS鏈€鏈夎叮鐨勫睘鎬э紝鎴戞兂鍚庡彴鑲畾浼氬緱鍒板緢澶氱エ銆傝儗鏅垎涓猴細绾壊绾挎€ф笎鍙橈紙linear-gradient锛夈€佸緞鍚戞笎鍙橈紙radial-gradient锛夈€佽搴︽笎鍙橈紙conic-gradient锛夈€佸閲嶇嚎鎬ф笎鍙橈紙repeating-linear-gradient锛夈€佸閲嶅緞鍚戞笎鍙橈紙repeating-radial-gradient)multiplerepeating-conic-gradient楂樹寒浜嗕竴涓瘝锛岀璋便€傚苟涓斿畠浠箣闂磋繕鍙互鐩镐簰娣峰悎锛屽彔鍔犳坊鍔犳护闀滐紝閰嶅悎鍚勭鑳屾櫙鐩稿叧鐨勫睘鎬х瓑绛夈€備絾鏄粖澶╋紝璁╂垜浠湅鐪嬬敤涓€琛孋SS鑳屾櫙浠ｇ爜鍙互鍋氫粈涔堛€傚棷锛熻繖閲岀殑涓昏鏄痳epeating-conic-gradient锛屽彧鏈変竴琛宑ss浠ｇ爜锛歿background:repeating-conic-gradient(#fff,#000,#fff0.1deg);}杩欐槸浠€涔堥锛熸兂涓€鎯筹紝杩欒浠ｇ爜缁樺埗鍑烘潵鐨勫浘褰細鏄粈涔堟牱瀛愬憿锛熺湅鐪嬶細鍝囷紝涓嶅彲鎬濊銆傝繖閲岀殑0.1deg闈炲父鍏抽敭锛岃繖閲岀殑瑙掑害瓒婂皬锛堝皬浜?deg瓒婂ソ锛夛紝鍥惧舰瓒婇叿銆傛垜浠妸0.1deg鎹㈡垚30deg鐪嬬湅锛歿background:repeating-conic-gradient(#fff,#000,#fff30deg);}褰撶劧涔熷緢婕備寒锛屼絾娌℃湁涓婇潰閭ｄ釜鎯婅壋銆侰odePen--OneLineCSSPattern鎴戜滑鍙互澶嶇敤CSS-Doodle鏉ラ殢鏈虹敓鎴愯繖涓編鍥撅細CSS-Doodle鏄竴涓熀浜嶹eb-Component鐨勫簱銆傝鎴戜滑鍙互蹇€熷垱寤哄熀浜嶤SSGrid甯冨眬鐨勯〉闈紝骞舵彁渚涘悇绉嶆柟渚跨殑鎸囦护鍜屽姛鑳斤紙闅忔満銆佸惊鐜瓑锛夛紝璁╂垜浠€氳繃涓€濂楄鍒欒幏寰椾笉鍚岀殑CSS鏁堟灉銆傛病閿欙紝瀹冪殑鏈川鍏跺疄灏辨槸涓婇潰璇寸殑杩欒鏍稿績CSS浠ｇ爜銆侰SSDoodle-CSSMagicConic-gradientmargin:auto鍜宲lace-items:center杩欎釜涔熷緢鏈夋剰鎬濓紝褰撶劧涓ユ牸鏉ヨ骞朵笉鏄疌SS鐨勪竴琛岋紝鍥犱负闇€瑕佸拰鍏朵粬灞炴€т竴璧蜂娇鐢ㄣ€傚皢鍏冪礌姘村钩鍜屽瀭鐩村眳涓殑鏈€蹇柟娉曟槸浠€涔堬紵姘村钩灞呬腑鍜屽瀭鐩村眳涓篃鏄疌SS棰嗗煙鏈€甯歌鐨勯棶棰橈紝涓嶅悓鍦烘櫙涓嬬殑鏂规硶涔熶笉鍚岋紝鍚勬湁浼樼己鐐广€傞偅涔堜笅闈袱绉嶆柟娉曞簲璇ョ畻鏄渶鏂逛究鐨勪簡锛氭柟娉曚竴锛歠lex甯冨眬涓嬬殑margin:auto

.g-container{display:flex;}.g-box{margin:auto;}涔熷彲浠ュ皢涓婇潰鐨刣isplay:flex鏇挎崲涓篸isplay:inline-flex|缃戞牸|鍐呰仈缃戞牸銆傚湪display:flex甯冨眬涓嬶紝marginauto涓嶄粎鍦ㄦ按骞虫柟鍚戠敓鏁堬紝鍦ㄥ瀭鐩存柟鍚戜篃浼氳嚜鍔ㄥ垎閰嶅墿浣欑┖闂淬€侰odePenDemo鈥斺€斾娇鐢╩arginauto瀹炵幇鍏冪礌姘村钩鍜屽瀭鐩村眳涓鏋滀綘瀵归潪甯稿ソ鐢ㄧ殑margin:auto涓嶆槸寰堜簡瑙ｏ紝鍙互鐪嬬湅锛氭帰绱lex涓婁笅鏂囦腑绁炲鐨勮嚜鍔╩argin鏂规硶2锛歱lace-items:灞呬腑鐩翠笅缃戞牸甯冨眬涓婇潰浠ｇ爜锛?g-container{display:grid;place-items:center}涓婇潰涓ゆ浠ｇ爜鐨勬晥鏋滄槸涓€鏍风殑锛欳odePenDemo--姘村钩鍜屽瀭鐩村眳涓厓绱爂rid+place-items:center鏈€鍚庝竴琛孋SS鍙互鍋氫粈涔堬紵鑲畾涓嶆浜庢锛屽綋鐒讹紝杩欎笉灏辨槸CSS鐨勪箰瓒ｆ墍鍦ㄥ悧銆傛兂瑕佽幏鍙栨渶鏈夎叮鐨凜SS璧勮锛屽崈涓囦笉瑕侀敊杩囨垜鐨刬CSS鍏紬鍙佛煒勫ソ浜嗭紝鏈枃鍒版缁撴潫锛屽笇鏈涘浣犳湁鎵€甯姪锛氾級鏇村绮惧僵鐨凜SS鎶€鏈枃绔犳眹鎬诲湪鎴戠殑Github--iCSS锛屾寔缁洿鏂颁腑锛屾杩庣偣涓槦璁㈤槄鏀惰棌銆傛湁浠€涔堥棶棰樻垨鑰呭缓璁彲浠ュ浜ゆ祦銆傚師鍒涙枃绔犳枃绗旀湁闄愶紝鐭ヨ瘑鍖箯銆傚鏋滄枃绔犱腑鏈変换浣曚笉鍑嗙‘鐨勫湴鏂癸紝璇峰憡璇夋垜銆?/p>