当前位置：首页 > Web前端 > vue.js

20+个高频实用的css剪辑，你可以有提高幸福感的小技巧

时间：2023-04-01 11:22:41 vue.js

鍓嶈█娆㈣繋鍏虫敞鈥滆偉澶撮奔鈥濆叕浼楀彿锛屼篃璁镐綘浠庢湭瑙佽繃锛屼絾寰堟湁鍙兘浣犲緟浼氳銆備慨鏀硅緭鍏ュ崰浣嶇鏍峰紡銆佸琛屾枃瀛楁孩鍑恒€侀殣钘忔粴鍔ㄦ潯銆佷慨鏀瑰厜鏍囬鑹层€佹按骞冲眳涓€佸瀭鐩村眳涓€︹€﹀涔堢啛鎮夌殑鍔熻兘鍟婏紒鍓嶇绔ラ瀷鍑犱箮澶╁ぉ鍜屼粬浠墦浜ら亾锛屼竴璧锋潵鎬荤粨涓€涓嬫垜浠殑css蹇箰鍓緫鍚э紒涓嬫浣犱笉鐢ㄧ櫨搴︼紝涓嶇敤璋锋瓕锛岃繖閲屽氨鏄綘鐨勬腐婀俱€傜偣鍑绘煡鐪嬫簮鐮佸湴鍧€銆愭寔缁洿鏂颁腑銆?.瑙ｅ喅鍥剧墖5px闂磋窛闂浣犳槸鍚︾粡甯搁亣鍒板浘鐗囧簳閮ㄨ帿鍚嶅叾濡欏鍑?px闂磋窛锛熷埆鎷呭績锛岃繖閲屾湁4绉嶆柟娉曞彲浠ヨ瀹冩秷澶便€傛柟妗堜竴锛氫负鐖跺厓绱犺缃甪ont-size:0effecthtml

csshtml,body{margin:0;padding:0;}.img-container{鑳屾櫙鑹?lightblue;font-size:0;}img{width:100%;}閫夐」浜岋細璁剧疆display:blockforimg鏁堟灉鍚屼笂html

csshtml,body{margin:0;padding:0;}.img-container{background-color:lightblue;}img{width:100%;/*keycss*/鏄剧ず:block;}鏂规涓夛細涓篿mg璁剧疆vertical-align:bottom鏁堟灉鍚屼笂html

csshtml,body{margin:0;padding:0;}.img-container{background-color:lightblue;}img{width:100%;/*keycss*/vertical-align:bottom;}鏂规鍥涳細鐖跺厓绱犺缃甽ine-height:5px锛屾晥鏋滃悓涓奾tml

csshtml,body{margin:0;padding:groundcontainer:0};back.-color.:lightblue;/*keycss*/line-height:5px;}img{width:100%;}2.鍏冪礌楂樺害璺熼殢绐楀彛鏈夋椂鍊欎綘甯屾湜涓€涓厓绱犵殑楂樺害鍜岀獥鍙ｄ繚鎸佷竴鑷达紝濡傛灉浣犺缃畠鍔犱笂鐧惧垎姣旓紝閭ｄ箞html銆乥ody绛夊厓绱犱篃寰楄窡鐫€涓€椤胯缃珮搴︼細100%鏈夋病鏈夋洿绠€鍗曠殑鏂规硶锛熸晥鏋渉tmlcss*{margin:0;padding:0;}.child{width:100%;/*keycss*/height:100vh;background-image:linear-gradient(180deg,#2af5980%,#009efd100%);}3.淇敼杈撳叆鍗犱綅绗︽牱寮忥紝绗竴涓槸閲嶅啓鐨勫崰浣嶇锛岀浜屼釜鏄師鏉ョ殑鏁堟灉htmlcssinput{瀹藉害锛?00px锛涢珮搴︼細30px锛涜竟妗嗭細鏃狅紱澶х翰锛氭棤锛涙樉绀猴細鍧楋紱杈硅窛锛?5px锛涜竟妗嗭細瀹炲績1px#dee0e9锛涘～鍏咃細015px锛涜竟妗嗗崐寰勶細15px;}.placehoder-custom::-webkit-input-placeholder{棰滆壊锛?babbc1锛沠ont-size:12px;}4.宸у浣跨敤not閫夋嫨鍣ㄥ湪鏌愪簺鎯呭喌涓嬶紝鎵€鏈夊厓绱犻兘闇€瑕佷竴瀹氱殑鏍峰紡锛屼絾鏈€鍚庝竴涓笉闇€瑕併€傝繖鏃跺€欎娇鐢╪ot閫夋嫨鍣ㄤ細鐗瑰埆鏂逛究锛屽涓嬪浘锛氭渶鍚庝竴涓厓绱犳病鏈変笅杈规鏁堟灉html

cellcontent
鍗曞厓鏍?/span>鍐呭
鍗曞厓鏍?/span>鍐呭
CellContent

keycssli:not(:last-child){border-bottom:1pxsolid#ebedf0;}5.浣跨敤flex甯冨眬瀹炵幇褰撴櫤鑳藉浐瀹氬簳閮ㄥ唴瀹逛笉澶熸椂锛岃鍒欒鏄庡簲璇ユ斁鍦ㄥ簳閮ㄣ€傚綋鍐呭瓒冲澶氭椂锛岃鍒欐弿杩颁細闅忕潃鍐呭涓嬫矇銆備綘涓€瀹氶亣鍒拌繃绫讳技鐨勯渶姹傘€備娇鐢╢lex宸у瀹炵幇甯冨眬html鎴戞槸鍐呭鍖?/div>瑙勫垯鎻忚堪css.container{height:100vh;/*鍏抽敭css*/鏄剧ず锛歠lex锛涘脊鎬ф柟鍚戯細鍒楋紱justify-content:space-between;}.main{/*Keycss*/flex:1;鑳屾櫙鍥惧儚锛氱嚎鎬ф笎鍙橈紙45deg锛?ff9a9e0%锛?fad0c499%锛?fad0c4100%锛夛紱鏄剧ず锛氬脊鎬э紱瀵归綈椤圭洰锛氬眳涓紱璇佹槑鍐呭锛氬眳涓紱棰滆壊锛?fff;}.footer{濉厖锛?5px0;鏂囨湰瀵归綈锛氬眳涓紱棰滆壊锛?ff9a9e锛涘瓧浣撳ぇ灏忥細14px;}6.浣跨敤caret-color鏀瑰彉鍏夋爣鐨勯鑹插湪鍋氳〃鍗曠浉鍏崇殑闇€姹傛椂锛屾湁鏃堕渶瑕佷慨鏀归棯鐑佸厜鏍囩殑棰滆壊銆俢aret-color灞炴€у畬缇庡湴鏀寔浜嗚繖涓姹傘€俬tmlcss.caret-color{/*keycss*/caret-color:#ffd476;}7.鍘绘帀type="number"鏈熬鐨勭澶?鍦ㄩ粯璁ゆ儏鍐典笅锛屽綋inputtype="number"鏃讹紝鏈熬浼氬嚭鐜颁竴涓皬绠ご锛屼絾鏄緢澶氭椂鍊欐垜浠兂鍘绘帀瀹冿紝鎬庝箞鍔炲憿锛熷鍥撅細绗竴涓緭鍏ユ娌℃湁鍘绘帀灏忕澶寸殑鏁堟灉锛岀浜屼釜鏈夈€傛晥鏋渉tml

css/*keycss*/.no-arrow::-webkit-outer-spin-button,.no-arrow::-webkit-inner-spin-button{-webkit-appearance:none;}8.outline:none绉婚櫎杈撳叆鐘舵€佽銆傚綋杈撳叆妗嗚閫変腑鏃讹紝瀹冮粯璁や細鏈変竴涓摑鑹茬殑鐘舵€佽銆備娇鐢╫utline:none閿幓闄ゆ晥鏋滃鍥撅細绗竴涓緭鍏ユ琚幓闄わ紝绗簩涓病鏈夊幓闄tml

CSS銆俷o-outline{outline:none;}9.瑙ｅ喅IOS鏈哄櫒涓婄殑IOS婊氬姩鏉″崱椤匡紝缁忓父閬囧埌鍏冪礌婊氬姩鍗￠】鐨勬儏鍐碉紝鍙渶瑕佷竴琛宑ss浣垮叾鏀寔寮规€ф粴鍔╞ody锛宧tml{-webkit-overflow-scrolling:touch;}10.缁樺埗涓夎褰㈡晥鏋渉tml

css.涓夎褰鏄剧ず锛氬唴鑱斿潡锛涘彸杈硅窛锛?0px锛?*鍩烘湰鏍峰紡*/border:solid10pxtransparent;}/*bottom*/.triangle.bottom{border-top-color:#0097a7;}/*upper*/.triangle.top{border-bottom-color:#b2ebf2;}/*left*/.triangle.left{border-right-color:#00bcd4;}/*right*/.triangle.right{border-left-color:#009688;}11.缁樺埗灏忕澶存晥鏋渉tml

css.arrow{display:inline-block;鍙宠竟璺濓細10px锛?*鍩烘湰鏍峰紡*/width:0;楂樺害锛?锛?*鍩烘湰鏍峰紡*/border:16pxsolid;杈规棰滆壊锛氶€忔槑#CDDC39閫忔槑閫忔槑锛涗綅缃細鐩稿锛泒.arrow::after{鍐呭锛氣€溾€濓紱浣嶇疆锛氱粷瀵癸紱/*閫氳繃浣嶇Щ瑕嗙洊鑳屾櫙*/right:-20px;椤堕儴锛?16px锛涜竟妗嗭細16px瀹炲績锛涜竟妗嗛鑹诧細閫忔槑#fff閫忔槑閫忔槑锛泒/*bottom*/.arrow.bottom{鍙樻崲锛氭棆杞紙270deg锛夛紱}/*top*/.arrow.top{transform:rotate(90deg);}/*宸?/.arrow.left{transform:rotate(180deg);}/*鍙?/.arrow.right{transform:rotate(0deg);}12.鍥剧墖灏哄鑷€傚簲vwvspadding鏁堟灉html

css.box,.box-vw{鑳屾櫙鑹诧細#f5f6f9;杈圭晫鍗婂緞锛?0px锛涙孩鍑猴細闅愯棌锛沵argin-bottom:15px;}.box:nth-of-type(2){width:260px;}/*vw鏂规*/.box-vw.img-container{width:100vw;韬珮锛?6.620879vw锛涘笗涓乬-bottom:inherit;}/*濉厖鏂规*/.img-container{width:100%;楂樺害锛?锛?*imageaspectratio*/padding-bottom:66.620879%;}img{width:100%;}13.闅愯棌婊氬姩鏉＄涓€涓彲浠ョ湅鍒版粴鍔ㄦ潯锛岀浜屼釜鏈夐殣钘忔晥鏋溿€傝娉ㄦ剰锛岃繖鎰忓懗鐫€瀹瑰櫒鍙互婊氬姩锛屼絾婊氬姩鏉￠殣钘忚捣鏉ワ紝灏卞ソ鍍忓畠鏄€忔槑鐨勪竴鏍枫€俬tml

鐖辨儏浼氱寮€锛屾湅鍙嬩細绂诲紑锛屽垢绂忎細绂诲紑锛屼絾鑰冭瘯涓嶄細锛屽洜涓轰綘涓嶄細锛屼綘涓嶄細

灏卞洜涓轰綘鍦ㄤ汉缇や腑澶氱湅浜嗕綘涓€鐪硷紝浣犫€斺€旈棶鎴戞父娉冲仴韬紵

css.box{瀹藉害锛?75px锛沷verflow:scroll;}/*鍏抽敭浠ｇ爜*/.box-hide-scrollbar::-webkit-scrollbar{display:none;/*ChromeSafari*/}.box>div{margin-bottom:15px;濉厖锛?0px锛涜儗鏅壊锛?f5f6f9锛涜竟鐣屽崐寰勶細6px锛涘瓧浣撳ぇ灏忥細12px锛泈idth:750px;}14.鑷畾涔夋枃瀛楅€変腑鏍峰紡绗竴绉嶆槸榛樿閫変腑鐘舵€侊紝绗簩绉嶆槸鑷畾涔夐€変腑鐘舵€佹晥鏋渉tml

閬囧埌浜嗘垜鐨勫垵绾ф槰澶╃殑瀛︽牎鍚屽锛屾病鎯冲埌浠栬繖涔堝潖鈥斺€斿氨寰€鎴戠閲屾斁涓€鍧楅挶

浠婂勾鎯呬汉鑺傦紝濡傛灉涓嶅嚭鎰忓锛屾垜浼氫竴涓汉搴﹁繃銆備竾涓€鍑轰簨--鍘诲尰闄?/p>css.box-custom::selection{color:#ffffff;鑳屾櫙-color:#ff4c9f;}15.绂佹閫変腑鏂囧瓧绗竴涓彲浠ラ€変腑锛岀浜屼釜涓嶈兘閫変腑鏁堟灉html

缁堜簬涔犳儻浜嗘垜鐨勬牱瀛?-鍘讳簡鍓釜澶村彂锛屽張涓€涓毦鐪嬬殑鏂规硶

鍥藉簡鍋囨湡锛屾兂鍜屽コ鏈嬪弸鍑哄幓鏃呮父锛屾眰甯繖鎺ㄨ崘鈥斺€斿摢閲屾湁濂虫湅鍙?/p>css.boxp:last-child{user-select:none;}16.姘村钩鍨傜洿灞呬腑鏁堟灉html姣忔涓存椂鎶变經鑴?-Buddhaalways缁欐垜涓€涓埡婵€

css.parent{padding:010px;鑳屾櫙鑹诧細#f5f6f9锛涢珮搴︼細100px锛涜竟鐣屽崐寰勶細6px锛涘瓧浣撳ぇ灏忥細14px锛?/涓嬮潰鏄按骞冲拰鍨傜洿灞呬腑鏄剧ず鐨勫叧閿唬鐮侊細flex;瀵归綈椤圭洰锛氬眳涓紱justify-content:center;}17.鍗曡鏂囧瓧婧㈠嚭鏄剧ず鐪佺暐鍙枫€備及璁″ぉ涓嬪墠绔兘鎳傚啓锛屾墍浠ョ湅缁欎綘鍑嗗鐨勬瀛愭瘮杈冩湁浠峰€笺€侲ffecthtml涓嶈杞绘槗鍚戝懡杩愪綆澶达紝鍥犱负浣犳効鎰忎竴灞傚眰鍓ュ紑鎴戠殑蹇冿紝浣犱細鐪嬪埌鑲ヨ倝

css.one-line-ellipsis{婧㈠嚭锛氶殣钘忥紱绌虹櫧锛歯owrap锛涙枃鏈孩鍑猴細鐪佺暐鍙凤紱/*涓嶆槸蹇呴』鐨勶紝鍙槸涓轰簡钀ラ€犲嚭涓€鏉＄嚎鏀句笉涓嬬殑鏁堟灉*/max-width:375px;}18.澶氳鏂囧瓧婧㈠嚭鏄剧ず鐪佺暐鍙风ず渚媓tml涓婂笣瀵规瘡涓汉閮芥槸鍏钩鐨勩€傝€佸ぉ缁欎簡浣犱笐闄嬬殑澶栬〃鈥斺€斾篃缁欎簡浣犱綆鏅哄晢銆傚鏋滀綘鎰挎剰涓€灞傚眰鍓ュ紑鎴戠殑蹇冿紝浣犱細鍙戠幇鈥斺€旀垜鏄釜鐩厜鐭祬鐨勪汉锛?/p>css.more-line-ellipsis{婧㈠嚭锛氶殣钘忥紱鏂囨湰婧㈠嚭锛氱渷鐣ュ彿锛涙樉绀猴細-webkit-box锛?*璁剧疆n琛岋紝鍖呮嫭1琛?/-webkit-line-clamp:2;-webkit-box-orient:vertical;}19.娓呮櫚鐨勬诞鍔ㄥ竷灞€锛岀湅璧锋潵寰堟湁骞翠唬鎰燄煒勩€傜幇鍦ㄧЩ鍔ㄧ搴旇澶у涓嶄細閲囩敤杩欑甯冨眬鏂瑰紡銆備粠鍥句腑鍙互鐪嬪嚭澶栧眰鐨勯珮搴﹀苟娌℃湁濉岄櫡锛岃繖涔熸槸浣跨敤clearfix绫荤殑鍘熷洜銆傛晥鏋渉tml

cssbody{padding:15px;棰滆壊锛?324b64;}/*閿爜*/.clearfix{zoom:1;}.clearfix::after{display:block;鍐呭锛?';娓呴櫎锛氫袱鑰咃紱}.box{濉厖锛?0px锛涜儗鏅壊锛?f5f6f9锛涜竟鐣屽崐寰勶細6px锛涘瓧浣撳ぇ灏忥細12px;}.box>div{瀹藉害锛?9%;楂樺害锛?00px;}.float-left{鑳屾櫙鑹诧細#faa755;鍚戝乏椋樻诞;margin-right:10px;}.float-left2{background-color:#7fb80e;}.float-left3{background-color:#b2d235;}20.浣跨敤filter:grayscale(1)璁╃綉椤靛憟鐜板搥鎮兼ā寮?浼熷ぇ鐨勯潻鍛界儓澹负绁栧浗鐨勮癁鐢熷仛鍑轰簡宸ㄥぇ鐨勮础鐚壓鐗诧紝鍦ㄧ浉搴旂殑鑺傛棩鏈熼棿锛屾湰绔欏皢鍛堢幇鐏拌壊鐨勬偧蹇垫ā寮忥紝浠ョ邯蹇电儓澹€傛晥鏋渃ssbody{杩囨护鍣細鐏板害锛?锛?}

上一篇：vuecli4取消生产环境console

下一篇：AntdvSpin组件扩展

20+个高频实用的css剪辑，你可以有提高幸福感的小技巧相关文章

最新推荐

猜你喜欢