讓我們學習一些實用的 CSS 技巧，以提升我們的工作效率。這些 CSS 技巧將幫助我們開發人員快速高效地構建項目。
現在，讓我們開始吧。
1. CSS :in-range 和 :out-of-range 偽類
這些偽類用于在指定范圍限制之內和之外設置輸入樣式。
(a) : 在范圍內
如果 input> 元素的當前值在 min 和 max 屬性的邊界之間，則該 input> 元素在范圍內。
這個偽類可以很容易地確定一個字段的當前值是否可以接受。
(b) ：超出范圍
如果 input> 元素的當前值超出 min 和 max 屬性的范圍，則該元素超出范圍。
如果字段值超出其范圍，它會向用戶提供視覺指示。
CSS 代碼：
/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}
輸出：
你應該知道這些偽類只適用于有范圍限制的元素。沒有這個限制，元素不能在范圍內或超出范圍。
2. grayscale( ) 函數
我們可以使用值 100% 將圖像從彩色轉換為黑白。當我們將此值設置為 0% 時，圖像將保持不變。
使用 100% 的值會將圖像轉換為黑白，這意味著照片中不會有顏色。
我們可以使用 0 到 100% 之間的值來創建各種不同的效果。
CSS 代碼：
.grayscale-image{
filter: grayscale(100%);
}輸出：
3.玻璃效果
我們可以使用幾行代碼將玻璃效果添加到您的下一個項目中。是的，真的就是這么簡單。玻璃效果很漂亮，可以為您的設計增添優雅氣息。
Glass.CSS（地址：https://css.glass/） 是目前最流行的玻璃形態生成器，我們可以利用它為我們的項目創建 CSS 玻璃效果。我們需要做的就是根據項目需要調整一些設置，然后將 CSS 代碼復制粘貼到實際開發的項目中。
CSS 代碼：
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}4. 使用以下 CSS 代碼設置文本樣式
這些是每個人都應該知道的一些非常基本的文本樣式技巧。但是，還有許多其他高級選項可用。
CSS 代碼：
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}5. CSS clamp()函數
CSS clamp( ) 函數將值限制在兩個上限和下限之間的范圍內。必須有一個首選值、一個最小值和一個最大值。
當字體大小根據視口改變時，Clamp() 會派上用場。
CSS 代碼：
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}6.居中一個div
開發人員最重要的任務是使 div 居中。還有很多其他選項可以讓 div 居中。在此示例中，我們使用 CSS flexbox 將 div 水平和垂直居中。
CSS 代碼：
div{
display: flex;
justify-content: center;
align-items: center;
}7.漸變CSS線性漸變
要創建漸變 CSS 線性漸變，只需使用下面的 CSS 代碼即可。
CSS 代碼：
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}8. CSS 抖動效果
當用戶輸入無效輸入時，此“搖動”動畫效果會搖動輸入字段。它簡單而優雅。例如，如果用戶在文本字段中輸入數字而不是字母，輸入字段將會抖動。
HTML 代碼：
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
CSS代碼：
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}9.文字溢出
我們可以使用此屬性截斷溢出的文本。可以使用省略號 (...) 或自定義字符串對其進行剪輯和顯示。
CSS 代碼：
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}10. 'column-count' 屬性
它指定應將元素劃分為的列數。
CSS 代碼：
11. CSS 動畫
動畫逐漸改變元素的樣式。只有先指定關鍵幀才能使用它。關鍵幀描述動畫元素如何出現在動畫序列中的特定點。
CSS 代碼：
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}12.陰影效果
使用 CSS，您可以為文本和元素添加效果。將屬性定義為 text-shadow 和 box-shadow。使用 text-shadow 為文本添加陰影，使用 box-shadow 為元素添加陰影。
(i) text-shadow：它給文本一個陰影。
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}
(ii) box-shadow：用于給元素賦予陰影效果。下面示例中的實際 div 是紫色的，盒子陰影是天藍色的，并且設置為向右和底部 10 個像素。
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}
13. CSS 裁剪
使用 clip-path 屬性，您可以只顯示元素的一部分，同時隱藏其余部分。
CSS 代碼：
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}
Clippy-CSS 剪輯路徑生成器是一種通過將元素剪輯為基本形狀（圓形、橢圓形、多邊形或插圖）或 SVG 源來在 CSS 中創建復雜形狀的快速簡便的方法。
14. CSS background-blend-mode 屬性
此屬性描述背景顏色和圖像（或兩個圖像）應如何混合。
與每個背景圖像相對應的混合模式列表構成了該值。混合模式指定背景層如何混合（顏色或圖片）。
您可以使用 background-blend-mode 屬性制作令人驚嘆的背景。
CSS 代碼：
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}
