學習一些好的實用的 CSS 技巧，可以幫助我們提供工作效率。因此，今天這篇文章，我將跟大家分享一些很棒的CSS知識技巧，希望對你有用。

(資料圖片僅供參考)

好了，我們現(xiàn)在開始吧。

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

這些偽類用于對指定范圍內(nèi)/外的輸入進行樣式設置。

(a) :in-range

如果 input 元素的當前值在 min 和 max 屬性的范圍之間，則 input 元素在范圍內(nèi)。

這個偽類可以很容易地確定一個字段的當前值是否可以接受。

(b) :out-of-range

如果 input 元素的當前值超出了 min 和 max 屬性的范圍，則 input 元素超出范圍。

如果字段值超出其范圍，它會給用戶一個視覺指示。

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);}

輸出：

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

2. grayscale( ) 函數(shù)

你可以使用值 100% 將圖像從彩色轉(zhuǎn)換為黑白。 當將此值設置為 0% 時，你的圖像將保持不變。

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

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

CSS 代碼：

.grayscale-image{filter: grayscale(100%);}

輸出：

3.玻璃效果

使用幾行代碼將玻璃效果添加到你的下一個項目中。 是的，這真的很容易， 玻璃效果很漂亮，為你的設計增添優(yōu)雅。

Glass.CSS是最流行的 glassmorphism 生成器，你可以在其中免費為你的項目創(chuàng)建 CSS Glass Effects。 你需要做的就是根據(jù)需要調(diào)整一些設置并將 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( ) 函數(shù)

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

當字體大小根據(jù)視口而變化時，Clamp() 會派上用場。

CSS 代碼：

p{font-size: clamp(1.8rem, 2.5vw, 2.8rem);}

6. 居中一個 div

對于開發(fā)人員來說，最重要的任務是使 div 居中。 有很多其他選項可以使 div 居中。 在本例中，我們使用 CSS flexbox 將 div 水平和垂直居中。

CSS 代碼：

div{display: flex;justify-content: center;align-items: center;}

7.漸變CSS線性漸變

要創(chuàng)建漸變 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 抖動效果

當用戶輸入無效內(nèi)容時，這種“搖動”動畫效果會搖動輸入字段。 它簡單而優(yōu)雅。 例如，如果用戶在文本字段中輸入數(shù)字而不是字母，則輸入字段會抖動。

HTML 代碼：

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" 屬性

它指定一個元素應該被劃分成的列數(shù)。

CSS 代碼：

p{column-count: 2;}

輸出：

11. CSS 動畫

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

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 是紫色的，盒子陰影是天藍色的，并且設置在右側(cè)和底部 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 clip-path maker 是一種通過將元素裁剪為基本形狀(圓形、橢圓形、多邊形或插圖)或 SVG 源來在 CSS 中創(chuàng)建復雜形狀的快速簡便的方法。

14. CSS background-blend-mode 屬性

此屬性描述了背景顏色和圖像(或兩個圖像)應如何混合。

與每個背景圖像對應的混合模式列表構(gòu)成了該值， 混合模式指定背景層如何混合(顏色或圖片)。

你可以使用 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;}  

輸出：

還有一些其他選項可用，如果你想了解有關(guān)此屬性的更多信息，請到W3Schools ：https://www.w3schools.com/cssref/pr_background-blend-mode.php 上進行查看。

寫在最后

以上就是我今天跟你分享的14個關(guān)于CSS的實用技巧，希望你能從中學到新的東西，如果你覺得有用的話，請記得點贊我，關(guān)注我，并將篇文章分享給你的開發(fā)者朋友，也許能夠幫助到他。

最后，感謝你的閱讀，編程快樂!

關(guān)鍵詞： 混合模式 線性漸變 可以使用 陰影效果 你應該知道