每个前端开发者都应该知道的 10 个 CSS 功能
原文:https://www . geesforgeks . org/10-CSS-functions-every-front-end-developer-应知/
像所有其他编程语言一样， CSS 也有它们的功能。CSS 函数用作各种 CSS 属性的值。与其他编程语言不同，我们不能用 CSS 编写自己的函数。
让我们来看看您应该知道的一些重要的 CSS 函数–
1。网址()功能 : 该功能用于设置背景图像、列表样式、列表样式图像、内容、光标、边框、边框图像、边框图像源、蒙版、蒙版图像。
background: url("photo.jpg")
2。计算()函数 : 该函数用于执行计算。
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。模糊()功能 : 用于应用模糊效果。
.body{
filter : blur(100px);
}
7。亮度()功能:帮助调节亮度。
.h2{
filter: brightness(50%);
}
8。不透明度()功能 : 帮助设置元素的不透明度。
img{
filter : opacity(50%);
}
9。 :not()功能 : 将样式应用于没有的 img 元素。无 p 级。
img:not(.no-p){
padding: 0;
}
10。:第 n 个子() & :第 n 个-最后一个子()选择器:选择一组元素中的一个或多个元素。
li:nth-child(2),
li:nth-last-child(2){
color: yellow;
}
版权属于：月萌API www.moonapi.com，转载请注明出处
