CSS（層疊樣式表）是一種樣式表語言，用于描述以 HTML 編寫的文檔的外觀和格式。它是 Web 開發(fā)的重要組成部分，因為它允許開發(fā)人員控制其網(wǎng)站和應(yīng)用程序的外觀。
在本文中，我們將討論一些最有用的CSS函數(shù)，每個前端開發(fā)人員都應(yīng)該熟悉。這些函數(shù)可以用于為您的網(wǎng)站或應(yīng)用程序添加樣式和格式，并可以極大地改善用戶體驗。
像其他編程語言一樣，CSS中的函數(shù)通過提供一行解決方案來簡化任務(wù)。但與其他編程語言不同的是，CSS中函數(shù)的結(jié)果實際上不會影響網(wǎng)站上的任何邏輯，它只用于影響網(wǎng)站中存在的視覺元素。
下面列出了CSS中可用的許多不同類型的函數(shù)：
自定義屬性的功能
顏色函數(shù)
偽類選擇器函數(shù)
動畫函數(shù)
過濾函數(shù)
尺寸和縮放函數(shù)
比較函數(shù)
邏輯函數(shù)
在CSS中還有許多其他類型的函數(shù)可用。但本文只討論其中的10個函數(shù)供我們使用。
var() 函數(shù)
CSS 中唯一可用的自定義屬性函數(shù)是 var 函數(shù)。每當(dāng)我們需要在 CSS 中使用自定義屬性時，都會使用 var 函數(shù)來引用它
示例
下面給出了使用 var 函數(shù)引用自定義屬性的示例 –
html {
--background-color: teal;
}
div {
background-color: var(--background-color);
}
登錄后復(fù)制
calc() 函數(shù)
CSS 中用于數(shù)學(xué)/算術(shù)計算的最常見函數(shù)是 calc 函數(shù)。它與我們上面討論的 var 函數(shù)一起廣泛用于動態(tài)計算屬性值。
示例
p {
height: calc(100px – 80px);
}
登錄后復(fù)制
我們還可以將calc與其他形式單位一起使用，例如em、rem等。
url()函數(shù)
您需要添加到網(wǎng)站的資源通常位于多個不同的位置。所以這個時候，我們就需要一個函數(shù)，可以用來將這些資源加載到CSS文件中。 url 函數(shù)正是這樣做的，它將資源從源位置鏈接并加載到目標(biāo)位置，即 CSS 文件。您可以鏈接所有類型的資源，例如圖像、svgs、字體、樣式表等
示例
body{
background-image: url(/fonts/myFont);
}
登錄后復(fù)制
rgb()函數(shù)
在設(shè)計網(wǎng)站時，我們經(jīng)常需要使用顏色。CSS 提供了多種使用顏色的方式，如十六進(jìn)制代碼、顏色名稱等。一種表示顏色的方式是使用它們的 RGB 值，而 rgb() 函數(shù)允許我們將這些十六進(jìn)制代碼轉(zhuǎn)換為 RGB，并在樣式表中使用它們。
示例
html{
color: rgb(255, 255, 255);
}
登錄后復(fù)制
我們可以使用另一個函數(shù)rgba，它可以用來控制定義顏色的不透明度。
hsl()函數(shù)
另一個可用于表示顏色的函數(shù)是 hsl 函數(shù)。它將顏色定義為色相、飽和度和亮度值。一些開發(fā)人員傾向于使用它而不是 RGB。
示例
html{
color: hsl(100, 50%, 80%);
}
登錄后復(fù)制
就像 rgb 一樣，hsl 也有一個更改版本 hsla，它也控制定義顏色的不透明度。
blur() 函數(shù)
為了對元素進(jìn)行區(qū)分，我們使用模糊函數(shù)。
示例
.someClass{
filter: blur(67%);
}
登錄后復(fù)制
不透明度（opacity()）函數(shù)
元素的不透明度是相應(yīng)元素的可見性。它指定通過該背景可以看到多少背景。
示例
.someClass{
filter: opacity(0.75);
}
登錄后復(fù)制
The nth-child() function
的中文翻譯為：
nth-child() 函數(shù)
當(dāng)我們必須選擇父元素的特定子元素時，我們可以使用nth-child函數(shù)。它是一個偽類選擇器函數(shù)，并根據(jù)您的需要進(jìn)行了一些更改以針對不同的元素。
示例
.someClass:nth-child(3){
Color: black;
}
登錄后復(fù)制
它的一些變化是 nth-last-child，nth-of-type，nth-last-of-type等等。
scale()函數(shù)
此函數(shù)允許您控制元素及其子元素的大小。我們還可以定義希望發(fā)生此更改的軸。
示例
.someClass{
transform: scale(100%);
}
登錄后復(fù)制
translate() 函數(shù)
此函數(shù)允許您更改元素的位置。我們甚至可以指定元素需要更改到的軸。
示例
.someClass{
transform: translate(30%);
}
登錄后復(fù)制
結(jié)論
在本文中，我們討論了函數(shù)、它們在 CSS 中的用途、它們與函數(shù)以及其他編程語言的不同之處。我們還學(xué)習(xí)了 CSS 中可用的不同類型的函數(shù)。最后我們看到了每個前端開發(fā)人員都需要知道的 CSS 中最常用的 10 個函數(shù)。這些只是一些最流行的功能，但總有更多東西需要學(xué)習(xí)。
以上就是每個前端開發(fā)者都應(yīng)該了解的10個CSS函數(shù)的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
