英文 | https://medium.muz.li/9-useful-css-tricks-that-you-should-know-39dd79f09d37
翻譯 | 楊小二
CSS 世界充滿了我們不知道的各種實用小技巧，是以說，在我今天的這篇文章裡，我也隻是列出了 CSS 的一些技巧。當你知道的越多時，一切都會更有意思。
1) 、文本選擇顔色
當你通路網站或閱讀部落格時，你經常使用滑鼠選擇文本，它隻是藍色選擇白色文本。你可以通過自定義文本顔色選擇使你的網站脫穎而出。
使用選擇僞元素為你網站上的文本提供個人風格。
2) 、首字下沉
在一些專業的文章/報紙上，我們經常會看見首字母下沉這樣的樣式外觀，一般都是在文本的第一個字母上使用首字下沉。首字下沉是那個大寫字母，文字環繞在它周圍。
效果如下圖：
使用 first-letter 僞元素來裝飾你的第一個字母，不需要使用 span 和 .dropcap 類名。
3)、 平滑滾動
你通路一些網站并嘗試轉到不同的部分，它會平滑地滾動到該部分。這不是進階編碼，但在你的 CSS 中隻需要一行代碼，你就可以實作這一點。
效果如下：
你可以将 CSS scroll-behavior 屬性與 html一起用作選擇器，以啟用整個 HTML 頁面的平滑滾動。
4) 、輸入插入符号顔色
你可以更改輸入字段插入符号的顔色以使其更加個性化。
你隻需要為這個效果使用 caret-color 屬性！
5) 、投影
使用投影為透明圖像提供更好的陰影效果，這會使你的作品看起來更棒。
效果如下：
樣式效果的代碼如下：
6) 、文本居中顯示
有時将 div 元素居中可能令人生畏，但你隻需幾行 CSS 即可将任何 div 居中。
不要忘記設定 display:grid; 對于父元素，然後使用 place-items 屬性。
7)、 自定義滾動條
預設滾動條對使用者沒有吸引力，你可以做的是自定義此滾動條。
我們隻用 CSS 就能做到這一點，如果你想在跨浏覽器上獲得全面支援，最好使用 JavaScript 庫來制作滾動條。
8) 、禁用使用者選擇
有時，你不想讓使用者選擇複制你網頁上面的某些内容，此時，你可以選擇使用禁止使用者選擇複制内容的功能。就算使用者選中了内容，但是依然不能複制所選的内容。
樣式效果如下：
CSS代碼非常簡單。
9) 、豎排文字
有時候，你可能會在網頁上或者報紙上看到一些豎排的文字，就像下圖中的标題文字這樣，從底部到頂部這樣豎排。
其實，這個效果的實作也非常簡單，你隻需要有了這兩個 CSS 屬性，你就能得到你想要的！
結論
這隻是 CSS 技巧的一小部分内容，它們可能會讓你感到好奇并鼓勵你學習更多有趣 CSS 文法。我們在許多日常任務中使用各種庫。我并不是說那不好，但是如果你更熟悉 CSS 技巧，有時你可以采用更好的方式來實作你想要的效果。
感謝你的閱讀，祝程式設計愉快！