css如何使用顏色函數(shù)

這篇文章主要為大家展示了“css如何使用顏色函數(shù)”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css如何使用顏色函數(shù)”這篇文章吧。

顏色函數(shù)

1. 基本概念

我們可能已經(jīng)很熟悉 Hex、RGB 和 HSL 顏色格式。CSS Color Module Levels 4 和 5 中包括一整套新的顏色函數(shù)，使我們能夠以前所未有的方式在 CSS 中指定和操作顏色。它們包括：

• hwb()：色相、白度、黑度。

• lab()：亮度以及決定色調(diào)的 a和b值。

• lch()：亮度、色度、色調(diào)。

• color-mix()：將兩種顏色混合在一起。

• color-contrast()：從顏色列表中，輸出與第一個參數(shù)相比對比度最高的顏色。

• color()：指定不同顏色空間中的顏色（例如display-p3）。

2. 使用方法

hwb(), lab() 和 lch() 的使用方式與我 rgb() 和 hsl() 函數(shù)基本相同，都有一個可選的alpha 參數(shù)：

.my-element {
  background-color: lch(80% 100 50); 
}

.my-element {
  background-color: lch(80% 100 50 / 0.5); 
}

color-mix() 將其他兩種顏色混合后輸出一種顏色。我們需要指定顏色插值方法作為第一個參數(shù)：

.my-element {
  background-color: color-mix(in lch, blue, lime);
}

color-contrast() 需要一個基色來比較其他顏色。它將輸出對比度最高的顏色，或者在提供額外關(guān)鍵字的情況下，輸出列表中符合相應(yīng)對比度的第一種顏色：

/*  輸出對比度最高的顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue);
}

/* 輸出符合AA對比度的第一種顏色 */
.my-element {
    color: white;
    background-color: color-contrast(white vs, lightblue, lime, blue to AA);
}

3. 當(dāng)前狀態(tài)

Safari 目前在瀏覽器支持方面處于領(lǐng)先地位，從版本 15 就開始支持hwb()、 lch()、lab()、color()，color-mix() 和 color-contrast() 可以通過 flag 啟用。Firefox 支持 hwb()，并且還標(biāo)記了對 color-mix() 和 color-contrast() 的支持。令人驚訝的是，Chrome 現(xiàn)在還不支持這些函數(shù)。

在代碼中提供樣式兼容并不難：給定兩種顏色規(guī)則，如果瀏覽器不支持第二種顏色規(guī)則，它將忽略第二種顏色規(guī)則：

.my-element {
    background-color: rgb(84.08% 0% 77.36%);
    background-color: lch(50% 100 331);
}

這樣，當(dāng)瀏覽器支持該函數(shù)時(shí)，就可以直接使用了。

以上是“css如何使用顏色函數(shù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！