CSS中的常见函数-全解

目录

CSS变量

常见函数

倒影效果


CSS变量

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




    
    CSS变量
    


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

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




    
    CSS变量
    


需求:第一个 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:




    
    常见函数的使用
    


倒影效果




    
    倒影效果
    


   

你可能感兴趣的:(前端,html,前端框架,linux,css)