1. CSS :in-range 和 :out-of-range 偽類

這些偽類用于在指定范圍限制之內(nèi)和之外設(shè)置輸入樣式。

(a) : 在范圍內(nèi)

如果 input> 元素的當(dāng)前值在 min 和 max 屬性的邊界之間，則該 input> 元素在范圍內(nèi)。這個(gè)偽類可以很容易地確定一個(gè)字段的當(dāng)前值是否可以接受。

(b) ：超出范圍

如果 input> 元素的當(dāng)前值超出 min 和 max 屬性的范圍，則該元素超出范圍。

如果字段值超出其范圍，它會(huì)向用戶提供視覺指示。

CSS 代碼：

輸出：

你應(yīng)該知道這些偽類只適用于有范圍限制的元素。沒有這個(gè)限制，元素不能在范圍內(nèi)或超出范圍。

2. grayscale( ) 函數(shù)

我們可以使用值 100% 將圖像從彩色轉(zhuǎn)換為黑白。當(dāng)我們將此值設(shè)置為 0% 時(shí)，圖像將保持不變。

使用 100% 的值會(huì)將圖像轉(zhuǎn)換為黑白，這意味著照片中不會(huì)有顏色。

我們可以使用 0 到 100% 之間的值來創(chuàng)建各種不同的效果。

CSS 代碼：

輸出：

3.玻璃效果

我們可以使用幾行代碼將玻璃效果添加到您的下一個(gè)項(xiàng)目中。是的，真的就是這么簡單。玻璃效果很漂亮，可以為您的設(shè)計(jì)增添優(yōu)雅氣息。

Glass.CSS（地址：https://css.glass/） 是目前最流行的玻璃形態(tài)生成器，我們可以利用它為我們的項(xiàng)目創(chuàng)建 CSS 玻璃效果。我們需要做的就是根據(jù)項(xiàng)目需要調(diào)整一些設(shè)置，然后將 CSS 代碼復(fù)制粘貼到實(shí)際開發(fā)的項(xiàng)目中。

CSS 代碼：

4. 使用以下 CSS 代碼設(shè)置文本樣式

這些是每個(gè)人都應(yīng)該知道的一些非常基本的文本樣式技巧。但是，還有許多其他高級選項(xiàng)可用。

CSS 代碼：

5. CSS clamp()函數(shù)

CSS clamp( ) 函數(shù)將值限制在兩個(gè)上限和下限之間的范圍內(nèi)。必須有一個(gè)首選值、一個(gè)最小值和一個(gè)最大值。

當(dāng)字體大小根據(jù)視口改變時(shí)，Clamp() 會(huì)派上用場。

CSS 代碼：

6.居中一個(gè)div

開發(fā)人員最重要的任務(wù)是使 div 居中。還有很多其他選項(xiàng)可以讓 div 居中。在此示例中，我們使用 CSS flexbox 將 div 水平和垂直居中。

CSS 代碼：

7.漸變CSS線性漸變

要?jiǎng)?chuàng)建漸變 CSS 線性漸變，只需使用下面的 CSS 代碼即可。

CSS 代碼：

8. CSS 抖動(dòng)效果

當(dāng)用戶輸入無效輸入時(shí)，此“搖動(dòng)”動(dòng)畫效果會(huì)搖動(dòng)輸入字段。它簡單而優(yōu)雅。例如，如果用戶在文本字段中輸入數(shù)字而不是字母，輸入字段將會(huì)抖動(dòng)。

HTML 代碼：

CSS代碼：

9.文字溢出

我們可以使用此屬性截?cái)嘁绯龅奈谋尽？梢允褂檬÷蕴?(...) 或自定義字符串對其進(jìn)行剪輯和顯示。

CSS 代碼：

10. 'column-count' 屬性

它指定應(yīng)將元素劃分為的列數(shù)。

CSS 代碼：

11. CSS 動(dòng)畫

動(dòng)畫逐漸改變元素的樣式。只有先指定關(guān)鍵幀才能使用它。關(guān)鍵幀描述動(dòng)畫元素如何出現(xiàn)在動(dòng)畫序列中的特定點(diǎn)。

CSS 代碼：

12.陰影效果

使用 CSS，您可以為文本和元素添加效果。將屬性定義為 text-shadow 和 box-shadow。使用 text-shadow 為文本添加陰影，使用 box-shadow 為元素添加陰影。

(i) text-shadow：它給文本一個(gè)陰影。

(ii) box-shadow：用于給元素賦予陰影效果。下面示例中的實(shí)際 div 是紫色的，盒子陰影是天藍(lán)色的，并且設(shè)置為向右和底部 10 個(gè)像素。

13. CSS 裁剪

使用 clip-path 屬性，您可以只顯示元素的一部分，同時(shí)隱藏其余部分。

CSS 代碼：

Clippy-CSS 剪輯路徑生成器是一種通過將元素剪輯為基本形狀（圓形、橢圓形、多邊形或插圖）或 SVG 源來在 CSS 中創(chuàng)建復(fù)雜形狀的快速簡便的方法。

14. CSS background-blend-mode 屬性

此屬性描述背景顏色和圖像（或兩個(gè)圖像）應(yīng)如何混合。

與每個(gè)背景圖像相對應(yīng)的混合模式列表構(gòu)成了該值?；旌夏Ｊ街付ū尘皩尤绾位旌希伾驁D片）。

您可以使用 background-blend-mode 屬性制作令人驚嘆的背景。

CSS 代碼：