CSS鏄竴绉嶇敤鏉ヨ〃杈綡TML鎴朮ML鏂囦欢鏍峰紡鐨勮绠楁満璇█锛岀浉淇″皬浼欎即浠兘涓嶉檶鐢燂紝浠婂ぉ灏忕紪灏变负澶у鏁寸悊浜嗕竴濂桟SS灏忔妧宸ч泦甯屾湜鑳戒负澶у鎻愪緵涓€浜涙柊鐨勮璁℃€濊矾~CSS鐨勭帺娉曞绉嶅鏍凤紝涓€璧锋潵鐪嬬湅鍚1.灏忔妧宸э紒鎺㈢储CSS鐨勫叏鍧楁枃鏈孩鍑哄拰鐪佺暐鍙风壒鎬ч潪甯告湁瓒ｃ€備粖澶╃殑鏂囩珷寰堟湁鎰忔€濄€傚畠灏嗚璁哄叏鍧楁枃鏈孩鍑哄拰鐪佺暐鍙风鐞嗙殑涓€浜涙湁瓒ｇ粏鑺傘€傛垜浠兘鐭ラ亾鏂囨湰澶暱浜嗐€備粠浠婂ぉ锛?021/03/06锛夊紑濮嬶紝CSS鎻愪緵浜嗕袱绉嶆柟寮忔潵鏂逛究鎴戜滑鐪佺暐鏂囧瓧銆傚浜庡崟琛屾枃鏈紝浣跨敤鍗曡鐪佺暐鍙凤細{width:200px;绌虹櫧锛歯owrap锛涙孩鍑猴細闅愯棌锛泃ext-overflow:ellipsis;}鑰屽浜庡琛屾枃鏈殑瓒呴暱鐪佺暐鍙凤紝浣跨敤-webkit-line-clamp鐩稿叧灞炴€э紝鍏煎鎬у凡缁忓緢濂戒簡锛歿width:200px;婧㈠嚭锛氶殣钘忥紱鏂囨湰婧㈠嚭锛氱渷鐣ュ彿锛涙樉绀猴細-webkit-box锛?webkit-line-clamp:2;-webkit-box-orient:vertical;}CodePenDemo--inline-block瀹炵幇鏁村潡婧㈠嚭https://codepen.io/Chokcoco/p...闂涓€锛氳秴闀挎枃鏈暣鍧楃渷鐣ラ棶棰?锛歩OS涓嶆敮鎸佹暣鍧楄秴闀挎孩鍑虹偣鐪佺暐2锛屽師鏉ss鐨勮儗鏅篃鍙互杩欎箞鐜┿€備綔涓哄墠绔紑鍙戣€咃紝鍚庡彴鏄紑鍙戜腑鐨勫父瀹€傚ぇ鍒版暣涓綉绔欑殑涓婚鑳屾櫙锛屽皬鍒颁竴涓寜閽殑鑳屾櫙銆侰SS鐨勫悗鍙板睘鎬у湪寮€鍙戜腑鍩烘湰澶╁ぉ閮戒細閬囧埌銆傚湪澶у鏁版儏鍐典笅锛屾垜浠彧浣跨敤绾壊鑳屾櫙鎴栧浘鍍忚儗鏅€傚鏋滀綘鎯宠鑷繁寮€鍙戠殑鍐呭鐪嬭捣鏉ユ洿鐢熷姩鏈夎叮锛岄€氳繃鏈枃锛屼綘涔熷彲浠ョ敤绾疌SS寮€鍙戠偒閰风殑鑳屾櫙銆傚湪寮€濮嬩箣鍓嶏紝璇峰洖绛斾互涓嬮棶棰樸€傚鏋滀綘鑳藉叏閮ㄧ瓟瀵癸紝璇存槑浣犲鑳屾櫙灞炴€ф帉鎻＄殑寰堝ソ锛?.寰勫悜娓愬彉鐨勯粯璁ゅ舰鐘舵槸浠€涔堬紵A锛氬師鍨婤锛氬綋妞渾鐨勮儗鏅睘鎬ф湁澶氫釜鍊兼椂锛屽摢涓€煎眰鍦ㄦ渶涓婇潰锛烝锛氱涓€涓€糂锛氭渶鍚庝竴涓€艰儗鏅細缁胯壊锛岀嚎鎬ф笎鍙橈紙绾㈣壊锛岀矇绾㈣壊锛夛紱鏁堟灉濡備綍锛烝锛氱豢鑹茶儗鏅疊锛氱孩绮夎壊娓愬彉鑳屾櫙C锛氭棤鑳屾櫙褰撹儗鏅睘鎬ф湁澶氫釜鍊兼椂锛屽浣曟寚瀹氭瘡涓€灞傝儗鏅殑澶у皬锛熷熀鏈儗鏅鍏堬紝璁╂垜浠洖椤句竴涓嬪熀鏈儗鏅€傛渶绠€鍗曠殑灏辨槸绾壊鑳屾櫙锛歜ackground:pink;绾挎€ф笎鍙樸€傚綋鐒朵綘涔熷彲浠ヨ嚜瀹氫箟鏂瑰悜锛?linear{background:linear-gradient(red,pink);}銆俵inear1{background:linear-gradient(145deg,red20%,pink);}寰勫悜娓愬彉鑳屾櫙锛歳adial-gradient(red,pink);瑙掑害娓愬彉鑳屾櫙锛氬渾閿ユ笎鍙橈紙绾㈣壊锛岀矇绾㈣壊锛夛紱鑳屾櫙锛氬渾閿ユ笎鍙橈紙绾㈣壊锛岀矇绾㈣壊锛夛紱鑳屾櫙锛氬緞鍚戞笎鍙橈紙绾㈣壊锛岀矇绾㈣壊锛夛紱绾壊鑳屾櫙鍩烘湰鑳屾櫙鎵╁睍娌″暐濂借鐨勶紝鍙兘鏀归鑹层€?.绾挎€ц儗鏅?.寰勫悜鑳屾櫙3.瑙掓笎鍙?.缁勫悎鑳屾櫙3.浣跨敤杩欎簺CSS灞炴€э紝甯冨眬鏁堢巼鍙堟彁鍗囦簡涓€涓。娆★紒鏈夊緢澶欳SS灞炴€ф湁浜涗汉涓嶇悊瑙ｏ紝鎴栬€呬粬浠悊瑙ｅ畠浠紝浣嗗湪闇€瑕佹椂蹇樿浣跨敤瀹冧滑銆傚叾瀹炴湁鏃跺€欐垜浠敤JavaScript鏉ュ疄鐜版煇浜涗氦浜掞紝鐢–SS鐨勪竴涓睘鎬у氨鍙互瀹屾垚锛屽彲浠ュぇ澶ц妭鐪佹垜浠殑缂栫爜鏃堕棿銆備綔涓哄墠绔紑鍙戣€咃紝鎴戜滑缁忓父浼氶亣鍒拌繖鏍风殑浜嬫儏銆傛墍浠ユ垜闂嚜宸憋紝涓轰粈涔堜笉鍐欎竴绡囨枃绔犲垪鍑烘墍鏈夐偅浜涙棦鏈夌敤鍙堟湁瓒ｇ殑杈冨皯浣跨敤鐨凜SS灞炴€э紵鍦ㄨ繖绡囨枃绔犱腑锛屾垜灏嗕粙缁嶄竴浜涗笉鍚岀殑CSS灞炴€э紝甯屾湜鑳界粰澶у甯︽潵鏂伴矞鎰燂紝璇濅笉澶氳锛岃鎴戜滑寮€濮嬪惂銆備娇鐢–SSGrid涓殑Place-Items锛屾垜浠彧闇€涓よCSS浠ｇ爜灏卞彲浠ュ皢鍏冪礌姘村钩鍜屽瀭鐩村眳涓€侶TML 鏄殑锛岃繖鏄竴涓负浜嗗ソ鐜╄€屽埗浣滅殑鑻遍泟閮ㄥ垎銆?/p>CSS寰堟
