英文 | https://javascript.plainenglish.io/4-things-you-didnt-know-css-can-do-13b364296570
翻譯 | 小愛
1、逐幀動畫
有時，我們需要使用元素上的原始 CSS 過渡屬性很難實作動畫。
例如，使用原始 CSS 屬性實作進度訓示器或移動圖示可能是一項艱巨的任務。在這種情況下，基于圖像的逐幀動畫是一個完美的選擇，你可以靈活地完成所有類型以及具有挑戰性的任務。
注意：我們也可以在大多數情況下使用 GIF，但使用 GIF 有一定的限制。它們僅限于256 個調色闆，而且它們不能具有alpha 透明度，當 GIF 下方有項目時，這會成為一個大問題。GIF 非常适合便攜式任務，但不是實驗的推薦選擇。
例如：
假設我們在一個 PNG 檔案中擁有所有動畫幀，如果我們應用一些基本的 CSS 動畫屬性，我們的結果可能如下所示。
目前，你可以觀察到目前結果，僅顯示動畫的第一幀，但是，如果我們添加不同的背景位置值，我們會注意到-100px 0為我們提供第二幀，-200px 0為第三幀，并且很快。
然而，在我們的 CSS 中仍然缺少一些東西，為了獲得最終結果，我們必須使用steps()計時函數，它将整個動畫以幀為機關除以我們指定的數。
請注意，在steps()計時函數中，我使用了用于動畫的動畫幀數 (7)。
2、連字元
如果你希望你的網站具有更準确的排版，那麼這個适合你。如果你想在應用程式中提供更高的可讀性，CSS中的連字元是一項你應該了解的基本功能，因為連字元允許将單詞分解為具有較少空格的音節，進而使文本看起來更自然。
注意：在 CSS 文本級别 3 中，引入了一個新屬性：接受值的連字元：none、manual和auto。
例如：
如果你簡單地應用值為auto的hyphens屬性，它對于連字元就足夠了，但是，你需要通過lang HTML 屬性聲明一種語言。
3、粘性頁腳
你一定遇到過 Web 應用程式中頁腳的問題，在這種情況下，具有任何塊級樣式的頁腳在處理較長的内容時，可以正常工作，但在頁面較短時會中斷。
此問題出現在内容短于視口高度減去頁腳高度的較短頁面上。
使用 Flexbox 作為靈活的解決方案
Flexbox 非常适合解決這種情況，你隻需要幾行 CSS 和一些 Flexbox開發經驗即可。
例如：
首先，你需要将display: flex應用于<body>元素，因為它是所有其他主要塊的父元素，以切換所有元素的彈性框布局。
此時，你的頁面外觀大緻與之前的Flexbox内容相同，為了使我們的方法有效，我們需要在 <body> 上指定min-height為100vh ，這将至少占據視口的整個高度。
此時，效果還沒有實作，因為<body>中每個盒子的高度仍然是内在确定的。為了解決這個問題，我們必須向<main>容器應用一個大于 0 （在我們的例子中為1）的flex值。
4、自定義下劃線
CSS 一直是一項令人驚訝的學習技能，CSS能做的事情的數量是我們不知道的。在 CSS 中，你必須擅長文本屬性，但是，當涉及到使用其他文本或更好的東西時，你可以以自己很酷的方式使用CSS。
例如：
文本中的下劃線可以使用很少的 CSS 行來實作，但請確定你沒有使用任何邊框底部技巧。因為該解決方案不會遵循我們對文本所期望的一切。
請注意，我們已經使用 text-shadow 屬性來解決下劃線（如 p、l、q 等）的問題了。
最後，感謝你的閱讀，如果你覺得今天的内容對你有幫助，請記得分享給你身邊的小夥伴，一起來學習進步。
學習更多技能
請點選下方公衆号