14 個(gè)非常實(shí)用的CSS屬性技巧

作者：楊小愛(ài) 2022-11-01 15:57:44

開(kāi)發(fā) 前端

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

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

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

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

(a) :in-range

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

這個(gè)偽類可以很容易地確定一個(gè)字段的當(dāng)前值是否可以接受。

(b) :out-of-range

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

如果字段值超出其范圍，它會(huì)給用戶一個(gè)視覺(jué)指示。

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

輸出：

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

2. grayscale( ) 函數(shù)

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

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

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

CSS 代碼：

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

輸出：

3.玻璃效果

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

Glass.CSS是最流行的 glassmorphism 生成器，你可以在其中免費(fèi)為你的項(xiàng)目創(chuàng)建 CSS Glass Effects。你需要做的就是根據(jù)需要調(diào)整一些設(shè)置并將 CSS 代碼復(fù)制粘貼到你的項(xiàng)目中。

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 代碼來(lái)設(shè)置文本樣式

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

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ù)將值限制在兩個(gè)上限和下限之間的范圍內(nèi)。必須有一個(gè)首選值、一個(gè)最小值和一個(gè)最大值。

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

CSS 代碼：

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

6. 居中一個(gè) div

對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，最重要的任務(wù)是使 div 居中。有很多其他選項(xiàng)可以使 div 居中。在本例中，我們使用 CSS flexbox 將 div 水平和垂直居中。

CSS 代碼：

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

7.漸變CSS線性漸變

要?jiǎng)?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 抖動(dòng)效果

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

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. 文字溢出

你可以使用此屬性截?cái)嘁绯龅奈谋荆梢允褂檬÷蕴?hào) (...) 或自定義字符串對(duì)其進(jìn)行剪裁和顯示。

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

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

CSS 代碼：

p{
column-count: 2;
}

輸出：

11. CSS 動(dòng)畫

動(dòng)畫會(huì)逐漸改變?cè)氐臉邮剑?只有在首先指定關(guān)鍵幀時(shí)才能使用它，關(guān)鍵幀描述動(dòng)畫元素如何出現(xiàn)在動(dòng)畫序列中的特定點(diǎ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：它給文本一個(gè)陰影。

h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}

輸出：

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

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 是一種通過(guò)將元素裁剪為基本形狀(圓形、橢圓形、多邊形或插圖)或 SVG 源來(lái)在 CSS 中創(chuàng)建復(fù)雜形狀的快速簡(jiǎn)便的方法。

14. CSS background-blend-mode 屬性

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

與每個(gè)背景圖像對(duì)應(yīng)的混合模式列表構(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;
}