CSS 函数是用来对属性值进行计算、转换或处理的一种方法。在前端开发中,我们经常会使用各种函数来实现样式的动态变化和效果。本章节将介绍一些常用的 CSS 函数。
1. rgb()
rgb()
函数用来表示颜色的 RGB 值,接受三个参数分别代表红色、绿色和蓝色的取值范围为 0 到 255。例如,rgb(255, 0, 0)
表示红色。
示例代码:
--- - ----------------- -------- -- --- -
2. rgba()
rgba()
函数与 rgb()
函数类似,只是多了一个表示透明度的参数,取值范围为 0 到 1。例如,rgba(255, 0, 0, 0.5)
表示半透明的红色。
示例代码:
--- - ----------------- --------- -- -- ----- -
3. hsl()
hsl()
函数用来表示颜色的 HSL 值,接受三个参数分别代表色相、饱和度和亮度。色相取值范围为 0 到 360,饱和度和亮度取值范围为 0% 到 100%。例如,hsl(0, 100%, 50%)
表示红色。
示例代码:
--- - ----------------- ------ ----- ----- -
4. hsla()
hsla()
函数与 hsl()
函数类似,只是多了一个表示透明度的参数,取值范围为 0 到 1。例如,hsla(0, 100%, 50%, 0.5)
表示半透明的红色。
示例代码:
--- - ----------------- ------- ----- ---- ----- -
以上就是一些常用的 CSS 函数,通过灵活运用这些函数,可以实现各种炫丽的样式效果。