在這篇文章中，我想向您展示一些簡單的CSS技巧，您可以在下一個(gè)項(xiàng)目中使用它們。讓我們開始吧！

1、-webkit-text-stroke

通過使用這個(gè)簡單易用的屬性，可以創(chuàng)建出酷炫的文字效果。它可以給文字添加描邊。-webkit-text-stroke是-webkit-text-stroke-width和-webkit-text-stroke-color的簡寫屬性。

.custom-headline {
  color: transparent;
  -webkit-text-stroke: 1px #04D939;
}

2、-webkit-line-clamp

這個(gè)技巧可以用來截?cái)喑^多行的文本。您還需要設(shè)置overflow: hidden。

.custom-button {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

附注：在Internet Explorer中不起作用。

固定表頭

對(duì)于非常長的大表格，固定表頭可以極大地幫助閱讀表格內(nèi)容。

.custom-table {
  thead tr {
    position: sticky;
    top: 0;
  }
}

4、place-items

這是用于網(wǎng)格布局和彈性盒子的align-items和justify-items的簡寫屬性。

.custom-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center center;
}

5、:placeholder-shown

如果您想要突出顯示尚未填寫的或元素，您可以使用:placeholder-shown偽類選擇器。</p><pre style="font-family: Monaco;font-size: 18px;margin-top: 20px;margin-bottom: 20px;padding: 15px;border-width: 0px;border-style: initial;border-color: initial;background: rgb(250, 250, 250);white-space: pre-wrap;word-break: break-all;overflow-x: auto;border-radius: 3px;text-align: left;color: rgb(34, 34, 34);box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;letter-spacing: normal;"><code style="white-space: pre-wrap;font-family: inherit;font-size: 14px;border-width: 0px;border-style: initial;border-color: initial;overflow-wrap: normal;word-break: normal;overflow-x: auto;line-height: 24px;"><span style="border-width: 0px;border-style: initial;border-color: initial;">input</span><span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(217, 99, 34);">:placeholder-shown</span> {<br> <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">border-bottom</span>: <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">2px</span> solid <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">#04D939</span>;<br>}</code></pre><p><img class="rich_pages wxw-img" data-ratio="0.3057142857142857" src="https://filescdn.proginn.com/d46b249a6e998e9f9cf83e384b315ca1/b2a6d93ebd48ec79d17b72db66cde534.webp" data-type="gif" data-w="700" style="border-width: 0px;border-style: initial;border-color: initial;margin-right: auto;margin-bottom: 8px;margin-left: auto;cursor: zoom-in;display: block;border-radius: 4px;"></p><h1 style="font-size: 1.056em;margin-top: 20px;margin-bottom: 20px;font-weight: 700;border-width: 0px;border-style: initial;border-color: initial;line-height: 1.579;color: rgb(0, 0, 0);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);"><span style="text-decoration: underline;">6、@media (hover: hover) 和 (pointer: fine)</span></h1><p data-track="26" style="margin-top: 20px;margin-bottom: 20px;border-width: 0px;border-style: initial;border-color: initial;color: rgb(34, 34, 34);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);">在移動(dòng)設(shè)備上可能會(huì)出現(xiàn):hover屬性的問題。懸停狀態(tài)也會(huì)在點(diǎn)擊時(shí)觸發(fā)。但是，如果您在@media (hover: hover) 和 (pointer: fine)中使用:hover屬性，懸停效果只會(huì)在非觸摸設(shè)備上顯示。以下是一個(gè)帶有懸停效果的箭頭動(dòng)畫示例：</p><pre style="font-family: Monaco;font-size: 18px;margin-top: 20px;margin-bottom: 20px;padding: 15px;border-width: 0px;border-style: initial;border-color: initial;background: rgb(250, 250, 250);white-space: pre-wrap;word-break: break-all;overflow-x: auto;border-radius: 3px;text-align: left;color: rgb(34, 34, 34);box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;letter-spacing: normal;"><code style="white-space: pre-wrap;font-family: inherit;font-size: 14px;border-width: 0px;border-style: initial;border-color: initial;overflow-wrap: normal;word-break: normal;overflow-x: auto;line-height: 24px;"><span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">@media</span> (<span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">hover:</span> hover) <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">and</span> (<span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">pointer:</span> fine) {<br> <span style="border-width: 0px;border-style: initial;border-color: initial;">arrow</span><span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(217, 99, 34);">:hover</span> {<br> <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">cursor</span>: pointer;<br> <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">color</span>: <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">#027333</span>;<br> <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">transform</span>: <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">translateX</span>(<span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">0.5rem</span>);<br> }<br> }</code></pre><p><img class="rich_pages wxw-img" data-ratio="0.175" src="https://filescdn.proginn.com/b03ee457bbd7652111a1bc8b135d67fe/8dcd624e37785cd2c85cb058491ec500.webp" data-type="gif" data-w="640" style="border-width: 0px;border-style: initial;border-color: initial;margin-right: auto;margin-bottom: 8px;margin-left: auto;cursor: zoom-in;display: block;border-radius: 4px;"></p><p><img class="rich_pages wxw-img" data-ratio="0.175" src="https://filescdn.proginn.com/d5c7b53f53ddb5891036030a3be01366/66e0c874cf2ace1c0d7da8a2a497693d.webp" data-type="gif" data-w="640" style="border-width: 0px;border-style: initial;border-color: initial;margin-right: auto;margin-bottom: 8px;margin-left: auto;cursor: zoom-in;display: block;border-radius: 4px;"></p><h1 style="font-size: 1.056em;margin-top: 20px;margin-bottom: 20px;font-weight: 700;border-width: 0px;border-style: initial;border-color: initial;line-height: 1.579;color: rgb(0, 0, 0);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);"><span style="text-decoration: underline;">7、column-count</span></h1><p data-track="31" style="margin-top: 20px;margin-bottom: 20px;border-width: 0px;border-style: initial;border-color: initial;color: rgb(34, 34, 34);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);">使用該屬性可以創(chuàng)建簡單的文本列。在這個(gè)例子中，有兩個(gè)column-count為2的<p>標(biāo)簽。</p><pre style="font-family: Monaco;font-size: 18px;margin-top: 20px;margin-bottom: 20px;padding: 15px;border-width: 0px;border-style: initial;border-color: initial;background: rgb(250, 250, 250);white-space: pre-wrap;word-break: break-all;overflow-x: auto;border-radius: 3px;text-align: left;color: rgb(34, 34, 34);box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;letter-spacing: normal;"><code style="white-space: pre-wrap;font-family: inherit;font-size: 14px;border-width: 0px;border-style: initial;border-color: initial;overflow-wrap: normal;word-break: normal;overflow-x: auto;line-height: 24px;"><span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">.wrapper</span> {<br> <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(17, 75, 166);">column-count</span>: <span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(168, 46, 46);">2</span>;<br>}</code></pre><p><img class="rich_pages wxw-img" data-ratio="0.3787037037037037" src="https://filescdn.proginn.com/2538c9cfd5ae96a8b5a6dfd0227f7dbc/0d857266aad4f91be902c4c87c7ed85f.webp" data-type="jpeg" data-w="1080" style="border-width: 0px;border-style: initial;border-color: initial;margin-right: auto;margin-bottom: 8px;margin-left: auto;cursor: zoom-in;display: block;border-radius: 4px;"></p><h1 data-track="33" style="font-size: 1.056em;margin-top: 20px;margin-bottom: 20px;font-weight: 700;border-width: 0px;border-style: initial;border-color: initial;line-height: 1.579;color: rgb(0, 0, 0);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);">結(jié)束</h1><p data-track="34" style="margin-top: 20px;margin-bottom: 20px;border-width: 0px;border-style: initial;border-color: initial;color: rgb(34, 34, 34);font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;letter-spacing: normal;white-space: normal;background-color: rgb(255, 255, 255);">由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，<span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(240, 65, 66);"><span style="border-width: 0px;border-style: initial;border-color: initial;background-color: rgb(242, 242, 242);">文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。</span></span></p><blockquote style="margin-top: 20px;padding: 16px 20px;border-width: initial;border-style: none;border-color: initial;quotes: none;color: rgb(80, 80, 80);background: rgb(244, 245, 246);font-size: 18px;line-height: 1.64;border-radius: 4px;font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;letter-spacing: normal;white-space: normal;margin-bottom: 0px !important;"><p data-track="39" style="border-width: 0px;border-style: initial;border-color: initial;"><span style="border-width: 0px;border-style: initial;border-color: initial;">原文：https://medium.com/@<br>mukhriddin/7-useful-css-tricks-6114d30ca9d9</span></p><p data-track="40" style="border-width: 0px;border-style: initial;border-color: initial;">作者：<span style="border-width: 0px;border-style: initial;border-color: initial;color: rgb(41, 41, 41);">MUKHRIDDIN KHODIEV</span></p><p data-track="41" style="border-width: 0px;border-style: initial;border-color: initial;">非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正</p></blockquote><p><br></p><section class="mp_profile_iframe_wrp"><mp-common-profile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-id="MjM5MjU2NDk0Nw==" data-headimg="http://mmbiz.qpic.cn/mmbiz_png/KEXUm19zKo5qI74ES9ich1cAXicFyV39RnrViaEvW5udF35oVhVe51E0r3adBXiagxB1zaxYVpE17s5U6WxBRQZSmw/0?wx_fmt=png" data-nickname="前端達(dá)人" data-alias="frontend84" data-signature="專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！" data-from="0" data-is_biz_ban="0"></mp-common-profile></section><p style="display: none;"><mp-style-type data-value="3"></mp-style-type></p></div></div></div><div id="go7utgvlrp" class="tag-list-box"><div id="go7utgvlrp" class="tag-list"><div id="go7utgvlrp" class="tag-list-container"></div></div></div><span id="go7utgvlrp" class="view_num">瀏覽 36</span><div id="go7utgvlrp" class="float-bar float-bar-relative" id="float-bar-relative"><div id="go7utgvlrp" class="float-bar-body"><div id="go7utgvlrp" class="item qinglite-zan"><i class="iconfont icon-aixin"></i>點(diǎn)贊 </div><div id="go7utgvlrp" class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span id="go7utgvlrp" class="com_num"></span>評(píng)論 </a><div id="go7utgvlrp" class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div id="go7utgvlrp" class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div id="go7utgvlrp" class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手機(jī)掃一掃分享</p></div></div><div id="go7utgvlrp" class="expand"></div><a onclick="miniProgram_navigateTo_func()" class="item qinglite_share_miniapp miniapp_show"><i class="iconfont icon-fenxiang1"></i>分享 </a><div id="go7utgvlrp" class="item jubao qinglite-jubao miniapp_hide"><i class="iconfont icon-jubao"></i> 舉報(bào) </div></div></div></div><div id="go7utgvlrp" class="comments_wrapper comments app_hide"><div id="go7utgvlrp" class="title">評(píng)論</div><div class="go7utgvlrp" id="comments" class="comments"><div id="go7utgvlrp" class="error"></div><div id="go7utgvlrp" class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="善語結(jié)善緣，惡言傷人心">