英文 | https://medium.muz.li/9-useful-css-tricks-that-you-should-know-39dd79f09d37

翻譯 | 楊小二

CSS 世界充滿了我們不知道的各種實用小技巧，所以說，在我今天的這篇文章里，我也只是列出了 CSS 的一些技巧。當(dāng)你知道的越多時，一切都會更有意思。

1) 、文本選擇顏色

當(dāng)你訪問網(wǎng)站或閱讀博客時，你經(jīng)常使用鼠標(biāo)選擇文本，它只是藍(lán)色選擇白色文本。你可以通過自定義文本顏色選擇使你的網(wǎng)站脫穎而出。

使用選擇偽元素為你網(wǎng)站上的文本提供個人風(fēng)格。

2) 、首字下沉

在一些專業(yè)的文章/報紙上，我們經(jīng)常會看見首字母下沉這樣的樣式外觀，一般都是在文本的第一個字母上使用首字下沉。首字下沉是那個大寫字母，文字環(huán)繞在它周圍。

效果如下圖：

使用 first-letter 偽元素來裝飾你的第一個字母，不需要使用 span 和 .dropcap 類名。

3)、 平滑滾動

你訪問一些網(wǎng)站并嘗試轉(zhuǎn)到不同的部分，它會平滑地滾動到該部分。這不是高級編碼，但在你的 CSS 中只需要一行代碼，你就可以實現(xiàn)這一點。

效果如下：

你可以將 CSS scroll-behavior 屬性與 html一起用作選擇器，以啟用整個 HTML 頁面的平滑滾動。

4) 、輸入插入符號顏色

你可以更改輸入字段插入符號的顏色以使其更加個性化。

你只需要為這個效果使用 caret-color 屬性！

5) 、投影

使用投影為透明圖像提供更好的陰影效果，這會使你的作品看起來更棒。

效果如下：

樣式效果的代碼如下：

6) 、文本居中顯示

有時將 div 元素居中可能令人生畏，但你只需幾行 CSS 即可將任何 div 居中。

不要忘記設(shè)置 display:grid; 對于父元素，然后使用 place-items 屬性。

7)、 自定義滾動條

默認(rèn)滾動條對用戶沒有吸引力，你可以做的是自定義此滾動條。

我們只用 CSS 就能做到這一點，如果你想在跨瀏覽器上獲得全面支持，最好使用 JavaScript 庫來制作滾動條。

8) 、禁用用戶選擇

有時，你不想讓用戶選擇復(fù)制你網(wǎng)頁上面的某些內(nèi)容，此時，你可以選擇使用禁止用戶選擇復(fù)制內(nèi)容的功能。就算用戶選中了內(nèi)容，但是依然不能復(fù)制所選的內(nèi)容。

樣式效果如下：

CSS代碼非常簡單。

9) 、豎排文字

有時候，你可能會在網(wǎng)頁上或者報紙上看到一些豎排的文字，就像下圖中的標(biāo)題文字這樣，從底部到頂部這樣豎排。

其實，這個效果的實現(xiàn)也非常簡單，你只需要有了這兩個 CSS 屬性，你就能得到你想要的！

結(jié)論

這只是 CSS 技巧的一小部分內(nèi)容，它們可能會讓你感到好奇并鼓勵你學(xué)習(xí)更多有趣 CSS 語法。我們在許多日常任務(wù)中使用各種庫。我并不是說那不好，但是如果你更熟悉 CSS 技巧，有時你可以采用更好的方式來實現(xiàn)你想要的效果。

感謝你的閱讀，祝編程愉快！

學(xué)習(xí)更多技能

請點擊下方公眾號