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

• :in-range 和 :out-of-range 是 CSS 中的偽類，它們可以用來樣式化表單控件中的輸入值。
• :in-range 表示當前輸入值位于 min 和 max 屬性之間，可以使用它來樣式化合法輸入值。
• :out-of-range 則表示當前輸入值不在 min 和 max 屬性之間，可以使用它來樣式化非法輸入值。

下面 我們來看一段示例，如下代碼所示：

HTML部分：

<form>
    <label for="age">年齡</label>
    <input type="number" id="age" name="age" min="18" max="65" required>
</form>

CSS部分：

input[type="number"]:in-range {
    background-color: green;
}
input[type="number"]:out-of-range {
    background-color: red;
}

上面這個示例中，我們有一個簡單的表單，其中包含一個數(shù)字類型的輸入框，它有一個最小值和最大值限制( min='18', max='65' )。如果用戶在輸入框中輸入的值在這個范圍內，則背景顏色變?yōu)榫G色；如果不在這個范圍內，則背景顏色變?yōu)榧t色。

注：:in-range 和 :out-of-range 偽類是在最新版本的瀏覽器中支持的，包括 Chrome、Firefox、Edge、Safari。在這些瀏覽器中都可以使用這兩個偽類來樣式化表單控件中的輸入值，并且在這些瀏覽器中都能正常工作。另外，需要注意的是，這兩個偽類只能應用于 input[type='number'] , input[type='range'] 和 input[type='date'] 上，而不能應用于其他類型的表單控件上。所以如果你想要使用這兩個偽類,需要考慮兼容性問題

二、grayscale( ) 顏色變換屬性

grayscale( ) 是 CSS 中的一種顏色變換屬性，用來將圖像變成灰度圖。它可以使用在任何元素上，但最常用于 <img> 元素。

語法：

img {
    filter: grayscale(value);
}

value 是一個百分數(shù)值，表示圖像的灰度程度。 0% 表示圖像不變，100% 表示圖像完全變成灰度圖。

示例代碼 ：

img {
    filter: grayscale(50%);
}

上面這個示例中，所有的 <img> 元素都會變成灰度圖，灰度程度為 50%。

注意：這個屬性需要在瀏覽器中使用 filter 屬性，并且在老版本的瀏覽器中可能不能使用，所以需要兼容性的處理。 另外，在需要支持無障礙訪問的場景下，使用這個屬性可能會導致閱讀障礙，所以需要在使用時注意可訪問性。

三、Glass Effect 毛玻璃效果

Glass Effect 效果是一種通過模擬玻璃材質的效果，在 CSS 中可以通過多種方式實現(xiàn)。

方法一：一種常見的實現(xiàn)方式是使用偽元素和漸變顏色，示例代碼如下:

.glass-effect {
    position: relative;
    overflow: hidden;
}
.glass-effect::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(image.jpg);
    filter: blur(5px);
}

上面的代碼中, 我們使用偽元素:before ,并將其設置在容器的上面，使用漸變顏色和模糊效果來模擬玻璃的效果,通過改變漸變的顏色，模糊的程度來實現(xiàn)不同的效果。

注意事項：

• 需要在瀏覽器中支持 filter 屬性
• 需要兼容性的處理
• 在需要支持無障礙訪問的場景下，使用這個效果可能會導致閱讀障礙，所以需要在使用時注意可訪問性。

不同的場景需要調整不同的參數(shù)來實現(xiàn)不同的效果，可以嘗試使用其他的屬性組合來實現(xiàn)不同的效果。

方法二：使用 backdrop-filter 屬性

backdrop-filter 屬性是一個CSS屬性, 可以在元素后面應用濾鏡效果. 使用方法類似于 filter 屬性, 但是它應用于元素的背景.

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

css.glass 這個網(wǎng)站，目前是最流行的玻璃效果在線代碼生成器，您可以免費使用這個工具創(chuàng)建 CSS 玻璃效果。您需要做的就是根據(jù)您的需要調整一些設置，然后將 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;
}

五、clamp( ) 屬性

clamp() CSS 函數(shù)將值限制在定義的最小邊界和最大邊界之間的值范圍內。該函數(shù)采用三個參數(shù)：最小值、首選值和最大允許值。

語法：

property: clamp(min, val, max);

min 是長度值的最小值， max 是最大值， value 是初始首選值。 clamp( ) 函數(shù)會返回一個值，該值大于等于 min 且小于等于 max。

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

示例代碼 ：

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

這個字體大小，默認為 2.5vw 的大小，當視口發(fā)生變化時，最小為1.8rem，最大為2.8rem。如果計算的值在1.8~2.8rem之間，則使用自適應值 2.5vw。

六、水平垂直居中

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

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

七、CSS線性漸變

在 CSS 中可以使用 linear-gradient() 函數(shù)來實現(xiàn)線性漸變效果。

相關語法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 是漸變的方向，可以是角度值（例如deg）或者關鍵字（例如to bottom）。 color-stop 是漸變的顏色停止點，可以是顏色值或者顏色值和位置（例如red 20%）。

示例代碼：

.example {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

上面的代碼中，我們將 linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 應用在 .example 元素上，顏色從左往右漸變。

也可以設置顏色停止點位置

.example {
    background: linear-gradient(to right, red 0%, orange 20%, yellow 40%, green 60%, blue 80%, indigo 100%);
}

還可以設置漸變的角度

.example {
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
}

結束語

今天的上半部分的分享就到這里，感謝你的閱讀，下一篇文章我將會繼續(xù)分享剩下的7個屬性，敬請期待。