每个前端开发人员都应该知道的 10 个 CSS 函数

与所有其他编程语言一样， CSS也有其功能。 CSS 函数用作各种 CSS 属性的值。与其他编程语言不同，我们不能在 CSS 中编写自己的函数。

让我们来看看你应该知道的一些重要的 CSS 函数——

1、url()函数：该函数用于设置背景图片、list-style、list-style-image、content、cursor、border、border-image、border-image-source、mask、mask-image。

background: url("photo.jpg")

2. calc()函数：该函数用于执行计算。

width: calc(100%-60px)

3. var()函数：该函数用于插入CSS 变量的值。

--white: #fff
h2 { color: var(--white); }

4. rgb() & rgba() 功能：用于描述颜色的等级，这里’r’代表红色，’g’代表绿色，’b’代表蓝色，’a’用于指定颜色的不透明度。

color: rgb(0, 0, 0)
color: rgba(0, 0, 0, 1)

5. hsl()函数：该函数用于使用色调、饱和度和亮度来描述颜色的等级。

color: hsl(0, 0, 0)

6. blur()函数：用于应用模糊效果。

.body{
    filter : blur(100px);
}

7.brightness()函数：有助于调节亮度。

.h2{
    filter: brightness(50%);
}

8. opacity()函数：帮助设置元素的不透明度。

img{
    filter : opacity(50%);
}

9. :not()函数：将样式应用到没有 .no-p 类的 img 元素。

img:not(.no-p){
    padding: 0;
}

10. :nth-child() & :nth-last-child() 选择器：选择一组元素中的一个或多个元素。

li:nth-child(2), 
li:nth-last-child(2){
    color: yellow;
}