這篇文章介紹了15個(gè)重要的CSS屬性，旨在提高讀者的CSS知識和技能。文章以清晰的方式解釋了每個(gè)屬性的作用和用法，并提供了相應(yīng)的示例代碼。通過這篇文章，讀者可以了解到一些有趣且實(shí)用的CSS屬性。

:in-range 和:out-of-range 偽類

CSS的:in-range和:out-of-range偽類用于樣式化在指定范圍限制內(nèi)和外的輸入。

(a) :in-range

如果輸入元素的當(dāng)前值在 min 和 max 屬性的范圍之間，那么它就處于范圍內(nèi)。

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

(b) :out-of-range

如果輸入元素的當(dāng)前值超出了min和max屬性的范圍，那么它就是超出范圍的。

它給用戶一個(gè)視覺指示，告訴他們字段值是否超出了范圍。

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

圖片

注意：這些偽類只適用于具有范圍限制的元素，沒有這個(gè)限制，元素就無法處于范圍內(nèi)或范圍外。

相關(guān)文檔：https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range

2. grayscale() 函數(shù)

如果使用0到100%之間的值，可以創(chuàng)建不同的效果。較低的值將保留一些顏色，而較高的值將使圖像更接近黑白。

這種圖像效果可以通過CSS的濾鏡屬性實(shí)現(xiàn)。通過將圖像的filter屬性設(shè)置為grayscale(100%)，可以將圖像完全轉(zhuǎn)換為黑白。要?jiǎng)?chuàng)建不同的效果，可以嘗試不同的grayscale值，例如grayscale(50%)將使圖像呈現(xiàn)一種半色調(diào)效果。

使用CSS的圖像轉(zhuǎn)換效果，可以通過調(diào)整值來輕松地將彩色圖像轉(zhuǎn)換為黑白，并實(shí)現(xiàn)各種不同的效果。

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

圖片

3. 玻璃效果

我們可以使用幾行代碼實(shí)現(xiàn)一個(gè)玻璃效果。玻璃效果非常美麗，可以為我們的設(shè)計(jì)增添優(yōu)雅。

Glass.CSS是最受歡迎的玻璃效果生成器，我們可以免費(fèi)為項(xiàng)目創(chuàng)建CSS玻璃效果。只需要根據(jù)您的需求調(diào)整一些設(shè)置，并將CSS代碼復(fù)制粘貼到您的項(xiàng)目中即可。

.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代碼來樣式化文本

這些是一些每個(gè)人都應(yīng)該知道的非?；镜奈谋緲邮郊记伞Ｈ欢?，還有許多其他高級選項(xiàng)可供選擇。

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.clamp() 函數(shù)

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

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

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

6. 居中一個(gè) div

開發(fā)者最重要的任務(wù)之一是將一個(gè)div居中。有很多其他的選項(xiàng)可以實(shí)現(xiàn)div的居中。在這個(gè)例子中，我們使用CSS的flexbox來實(shí)現(xiàn)div的水平和垂直居中。

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

7. CSS線性漸變

要?jiǎng)?chuàng)建一個(gè)漸變的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)效果

這個(gè)“搖晃”動(dòng)畫效果會(huì)在用戶輸入無效內(nèi)容時(shí)晃動(dòng)輸入框。它簡單而優(yōu)雅。例如，如果用戶在文本框中輸入數(shù)字而不是字母，輸入框?qū)?huì)搖晃。

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

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)嘁绯龅奈谋?。它可以被裁剪并顯示為省略號(...)或自定義字符串。

.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ù)。

p{
  column-count: 2;
}

圖片

11. CSS動(dòng)畫

動(dòng)畫逐漸改變元素的樣式。只有在指定關(guān)鍵幀之后才能使用。關(guān)鍵幀描述了動(dòng)畫序列中特定點(diǎn)上動(dòng)畫元素的外觀。

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: It gives the text a shadow. (i) text-shadow: 它給文本添加了陰影。

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

圖片

box-shadow：用于給元素添加陰影效果。下面的示例中，實(shí)際的 div 元素是紫色的，盒子陰影是天藍(lán)色的，并且設(shè)置在右下方 10 像素處。

div{
  width: 200px;
  height: 200px;
  padding: 15px;
  background-color: purple;
  box-shadow: 10px 10px skyblue;
}

圖片

13. CSS剪裁

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

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

圖片

14.CSS 背景混合模式屬性

該屬性描述了背景顏色和圖像（或兩個(gè)圖像）的混合方式。一個(gè)與每個(gè)背景圖像對應(yīng)的混合模式列表組成了該值?；旌夏Ｊ街付吮尘皥D層如何混合（顏色或圖片）。

可以使用background-blend-mode屬性創(chuàng)建令人驚艷的背景。

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

圖片

15. 色相旋轉(zhuǎn)動(dòng)畫

還有其他一些選項(xiàng)可供選擇。如果你想了解更多關(guān)于這個(gè)屬性的信息，請?jiān)赪3Schools上查看。

可以在網(wǎng)站的主要部分和按鈕上添加色相旋轉(zhuǎn)動(dòng)畫。例如，天氣預(yù)報(bào)網(wǎng)站的主要部分將因此而變得令人驚艷。

button {
  background: linear-gradient(35deg, #8C52FF, #C669FF);
  animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
  to {
    filter: hue-rotate(85deg);
 }
}

圖片