CSS中的常见函数-全解

目录

CSS变量

常见函数

倒影效果

---

CSS变量

        在 CSS3 中支持定义变量，然后可以在不同的地方来使用这个变量所对应的值。它的好处就是可以减少代码的编写，从而提交代码的复用性。

    
    
    


需求：第一个 div 和第二个 div 中内容的颜色为红色， 第三个为黑色。
这是div块
这是第二个块
这是第三个块

要注意：变量只能是用于值的地方，而不能用到属性的地方。

    
    
    


需求：第一个 div 和第二个 div 中内容的颜色为红色， 第三个为黑色。
这是div块
这是第二个块
这是第三个块

常见函数

函数	描述	CSS 版本
attr()	返回选择元素的属性值。	2
calc()	允许计算 CSS 的属性值，比如动态计算长度值。	3
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。	3
hsl()	使用色相、饱和度、亮度来定义颜色。	3
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。	3
linear-gradient()	创建一个线性渐变的图像	3
radial-gradient()	用径向渐变创建图像。	3
repeating-linear-gradient()	用重复的线性渐变创建图像。	3
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。	3
rgb()	使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。	2
rgba()	使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。	3
var()	用于插入自定义的属性值。	3

 eg:

倒影效果