七個實(shí)用的CSS技巧，你學(xué)會了嗎?
1. First letter drop 1. 首字母丟失
圖片
我們可以使用 :first-letter 來刪除文本的第一個字母：
p:first-letter {
font-size: 200%;
color: #8A2BE2;
}:first-letter 選擇器用于指定元素的首字母樣式，它僅適用于塊級元素。效果如下:
https://codepen.io/OMGZui/pen/oNEMVvN
2. 圖像文本環(huán)繞
圖片
CSS 中的 shape-outside 屬性是一個非常有用且強(qiáng)大的工具，它允許設(shè)計師和開發(fā)者控制內(nèi)容如何圍繞一個浮動元素（通常是圖像或圖形）進(jìn)行排列。通過定義這個屬性中的形狀，您可以創(chuàng)建更復(fù)雜和吸引人的布局，使文本環(huán)繞復(fù)雜的形狀，而不僅僅是通常的矩形。
shape-outside 屬性定義了內(nèi)容將圍繞其排列的形狀。它通常與 float 屬性一起使用，因為只有浮動的元素才會有內(nèi)容圍繞它。
可用的值:
- none: 默認(rèn)值。不創(chuàng)建任何形狀；內(nèi)容圍繞元素的盒子進(jìn)行排列。
- <shape-box>: 使用元素的邊距盒、邊框盒、填充盒或內(nèi)容盒作為參考盒。
- margin-box
- border-box
- padding-box
- content-box
- <basic-shape>: 可以定義一個基本的形狀，例如：
- circle()
- ellipse()
- inset()
- polygon()
- <image>: 一個圖像可以用作形狀的參考。圖像的 alpha 通道決定了形狀的尺寸。
舉例
使用橢圓:
.element {
float: left;
shape-outside: ellipse(50% 50% at 50% 50%);
}使用多邊形:
.element {
float: left;
shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
}使用圖像:
.element {
float: left;
shape-outside: url('path-to-image.png');
}實(shí)際應(yīng)用
假設(shè)你有一個圓形圖像，您希望文本圍繞它排列，同時尊重圓的邊界。沒有 shape-outside，文本只會圍繞圖像的矩形邊界盒子進(jìn)行排列。但使用 shape-outside，可以使文本平滑地圍繞圓形圖像進(jìn)行排列，從而得到更加視覺上吸引人的布局。
整合地址：https://codepen.io/OMGZui/pen/JjpBzGP
3. 使用 :where() 簡化代碼
當(dāng)將同一樣式應(yīng)用于多個元素時，CSS可能會像這樣：
.page div,
.paget .title,
.page #article {
color: red;
}這段代碼看起來并不是很易讀，而 :where() 偽類就派上了用場。 :where() 偽類函數(shù)接受一個選擇器列表作為其參數(shù)，并將選擇所有可以由選擇器列表中的任何規(guī)則選擇的元素。
.page :where(div, .title, #article) {
color: red;
}4. 透明圖像的陰影
圖片
你是否曾嘗試在透明圖像上添加 box-shadow ，結(jié)果卻看起來像是你添加了邊框？我想我們都有過這樣的經(jīng)歷。為透明圖像添加陰影效果的解決方案是使用 drop-shadow 。
它的工作方式是， drop-shadow 屬性遵循給定圖像的alpha通道。因此，陰影是基于圖像內(nèi)部的形狀，而不是顯示在其外部。
事例地址：https://codepen.io/OMGZui/pen/bGLjJNO
5. 文字的打字效果
圖片
網(wǎng)頁設(shè)計正在以每分鐘的速度變得更富創(chuàng)意。借助CSS動畫功能，您可以讓您的網(wǎng)頁充滿生機(jī)。在這個例子中，我們使用動畫和@keyframes屬性來實(shí)現(xiàn)打字機(jī)效果。
具體來說，對于這個演示，我們實(shí)現(xiàn)了 steps() 屬性來分割我們的文本動畫。首先，你需要指定 steps() 的數(shù)量，就我們的情況來說，這是我們希望進(jìn)行動畫處理的文本的字符長度。
其次，我們使用 @keyframes 來聲明動畫何時開始。例如，如果你在“文字打字效果”后面寫了另一個詞，除非你改變CSS片段中的 steps() 數(shù)量，否則動畫將無法工作。
也就是說，這種效果并不是特別新穎。然而，盡管可以通過使用CSS達(dá)到同樣的效果，但大多數(shù)開發(fā)者仍然會選擇使用JavaScript庫。
事例地址：https://codepen.io/OMGZui/pen/MWQBxqd
6. 設(shè)置自定義光標(biāo)
圖片
你可能永遠(yuǎn)不需要強(qiáng)制讓你的訪客使用獨(dú)特的光標(biāo)。至少，對于一般的用戶體驗?zāi)康膩碚f是這樣。然而，關(guān)于 cursor 屬性的一點(diǎn)值得注意的是，它允許你展示圖片。這相當(dāng)于以照片格式展示工具提示。
一些使用場景包括能夠比較兩張不同的照片，而無需在視口中渲染這些照片。例如，可以使用光標(biāo)屬性來節(jié)省設(shè)計中的空間。由于你可以將自定義光標(biāo)鎖定到特定的 div元素上，所以它不會干擾到元素之外的其他元素。
事例地址：https://codepen.io/OMGZui/pen/abqjMXd
7. 純CSS的清單
圖片
正如我在文章開頭提到的，CSS正在穩(wěn)步發(fā)展。而這個動態(tài)清單的演示就是一個很好的例證。
它的工作方式是我們將復(fù)選框輸入類型與 :checked 偽類一起使用。并使用 transform 屬性在 :checked 規(guī)范返回真值時更改狀態(tài)。
使用這種方法可以實(shí)現(xiàn)各種各樣的目標(biāo)。例如，當(dāng)用戶點(diǎn)擊特定的復(fù)選框時，切換隱藏的內(nèi)容。它適用于單選和復(fù)選框等輸入類型，但也可以應(yīng)用于<option>和<select>元素。
事例地址：https://codepen.io/OMGZui/pen/yLvqwZW
