2023-02-13 17:05:09來(lái)源：web前端開(kāi)發(fā)
在web開(kāi)發(fā)領(lǐng)域里，有許多布局和效果看起來(lái)好像很容易實(shí)現(xiàn)，但是動(dòng)手一做，發(fā)現(xiàn)好像不是那么回事情，為了解決這些看起來(lái)容易做起來(lái)難的問(wèn)題，我今天特意整理一些實(shí)用的CSS技巧。
現(xiàn)在，我們就開(kāi)始今天的內(nèi)容吧。
1.首字母下降我們可以使用 :first-letter 來(lái)刪除文本的第一個(gè)字母。
【資料圖】
p:first-letter { font-size: 200%; color: #8A2BE2;}:first-letter 選擇器用于指定元素首字母的樣式，它只適用于塊級(jí)元素。
在線演示地址：https://codepen.io/OMGZui/pen/oNEMVvN
2. 圖文環(huán)繞Shape-outside 是一個(gè)允許設(shè)置形狀的 CSS 屬性，它還有助于定義文本流動(dòng)的區(qū)域.
在線演示地址：https://codepen.io/OMGZui/pen/JjpBzGP
3. 使用 :where() 簡(jiǎn)化代碼將相同的樣式應(yīng)用于多個(gè)元素時(shí)，CSS 可能如下所示：
.page div,.paget .title,.page #article { color: red;}這段代碼看起來(lái)可讀性不太友好，這時(shí)，:where() 偽類(lèi)就派上用場(chǎng)了。
:where() 偽類(lèi)函數(shù)接受一個(gè)選擇器列表作為其參數(shù)，并將選擇所有可以通過(guò)選擇器列表中的任何規(guī)則選擇的元素。
上面的代碼可以使用 :where() 寫(xiě)成這樣：
.page :where(div, .title, #article) { color: red;}這樣，這段代碼是不是看起來(lái)干凈多了？
4.透明圖像的陰影您是否曾經(jīng)嘗試過(guò)向透明圖像添加框陰影，只是為了讓它看起來(lái)像您添加了邊框？
它的工作方式是 drop-shadow 屬性跟隨給定圖像的 alpha 通道。因此，陰影基于圖像內(nèi)部的形狀，而不是顯示在圖像外部。
在線演示地址：https://codepen.io/OMGZui/pen/bGLjJNO
5.文字打字效果借助 CSS 動(dòng)畫(huà)功能，我們可以使網(wǎng)頁(yè)設(shè)計(jì)變得越來(lái)越有創(chuàng)意，還可以讓網(wǎng)頁(yè)栩栩如生。在此示例中，我們使用動(dòng)畫(huà)和“@keyframes”屬性來(lái)實(shí)現(xiàn)打字機(jī)效果。
具體來(lái)說(shuō)，對(duì)于這個(gè)演示，我們實(shí)現(xiàn)了 steps() 屬性來(lái)分割我們的文本動(dòng)畫(huà)。
首先，我們必須指定steps()，在這個(gè)例子中，我們希望設(shè)置動(dòng)畫(huà)的文本的字符長(zhǎng)度。
其次，我們使用“@keyframes”來(lái)聲明動(dòng)畫(huà)何時(shí)開(kāi)始。例如，如果您在“Typing effect for text”之后寫(xiě)了另一個(gè)詞，除非您更改 CSS 代碼段中的 steps() 數(shù)量，否則動(dòng)畫(huà)將不會(huì)運(yùn)行。
也就是說(shuō)，這種效果并不是特別新鮮。然而，大多數(shù)開(kāi)發(fā)人員涌向 JavaScript 庫(kù)，盡管使用 CSS 可以實(shí)現(xiàn)相同的結(jié)果。
在線演示地址：https://codepen.io/OMGZui/pen/MWQBxqd
6.設(shè)置自定義光標(biāo)您不太可能需要強(qiáng)迫訪問(wèn)者進(jìn)入一個(gè)獨(dú)特的光標(biāo)。至少，不是為了一般的用戶(hù)體驗(yàn)?zāi)康?。不過(guò)，關(guān)于 cursor 屬性需要注意的一件事是它允許您顯示圖像。這相當(dāng)于以照片格式顯示工具提示。
一些用例包括能夠比較兩張不同的照片而無(wú)需在視口中渲染這些照片。例如。游標(biāo)屬性可用于節(jié)省設(shè)計(jì)中的空間。由于您可以將自定義光標(biāo)鎖定到特定的 div 元素，它不會(huì)干擾它之外的元素。
在線演示地址：https://codepen.io/OMGZui/pen/abqjMXd
7. 純 CSS實(shí)現(xiàn)列表清單這是動(dòng)態(tài)列表清單的演示效果例子。
它的工作方式是我們將復(fù)選框輸入類(lèi)型與 :checked 偽類(lèi)一起使用。并在 :checked 規(guī)范返回 true 時(shí)使用 transform 屬性更改狀態(tài)。
您可以使用這種方法實(shí)現(xiàn)各種目標(biāo)。例如，當(dāng)用戶(hù)單擊特定復(fù)選框時(shí)切換隱藏內(nèi)容。它適用于單選框和復(fù)選框等輸入類(lèi)型，但也可以應(yīng)用于
在線演示地址：https://codepen.io/OMGZui/pen/yLvqwZW
8.文字描邊要實(shí)現(xiàn)這樣一種文字描邊的效果，其實(shí)，我們只需要為文本屬性添加輪廓。
.custom-headline { color: transparent; -webkit-text-stroke: 1px #04D939;}9. Line Clamp這個(gè)技巧可用于減少跨越多行的文本，我們只需要設(shè)置overflow:hidden即可。
.custom-button { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}10.固定頁(yè)面頭部頁(yè)面頭部導(dǎo)航固定形式的效果，特別是頁(yè)面內(nèi)容很長(zhǎng)的一些布局，這個(gè)效果非常實(shí)用，也是很多網(wǎng)站上比較常見(jiàn)的效果。
.custom-table { thead tr { position: sticky; top: 0; }}11.Place Items這是 grid 和 flexbox align-items 和 justify-items 的快捷屬性。
.custom-wrapper { display: grid; grid-template-columns: 1fr 1fr; place-items: center center;}12.顯示占位符如果尚未填充是否需要突出顯示 或