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

翻譯 | 楊小二

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

1) 、文本選擇顏色

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

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

2) 、首字下沉

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

效果如下圖：

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

3)、 平滑滾動(dòng)

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

效果如下：

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

4) 、輸入插入符號(hào)顏色

你可以更改輸入字段插入符號(hào)的顏色以使其更加個(gè)性化。

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

5) 、投影

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

效果如下：

樣式效果的代碼如下：

6) 、文本居中顯示

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

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

7)、 自定義滾動(dòng)條

默認(rèn)滾動(dòng)條對(duì)用戶沒(méi)有吸引力，你可以做的是自定義此滾動(dòng)條。

我們只用 CSS 就能做到這一點(diǎn)，如果你想在跨瀏覽器上獲得全面支持，最好使用 JavaScript 庫(kù)來(lái)制作滾動(dòng)條。

8) 、禁用用戶選擇

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

樣式效果如下：

CSS代碼非常簡(jiǎn)單。

9) 、豎排文字

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

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

結(jié)論

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

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

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

請(qǐng)點(diǎn)擊下方公眾號(hào)