CSS自定义属性

自定义属性介绍

1.自定义属性的使用方法
自定义属性分为：
局部自定义属性
全局自定义属性
使用 “–”声明自定义属性 使用两个 “-”声明
例如： --bg-color: red 注意这里有一个：（冒号）
这样就声明了一个自定义属性 bg-color==和red
声明后如何使用：
var（–自定义属性名） 括号还是要加上两个“-”
background:var(–bg-color)
这样等同于 --bg-color=red
那么我们为什么要这样声明更麻烦
有些情况下这样会更加便利
自定义属性的方法就类似编程中的全局常量 比如π 声明后一处修改处处修改
下面介绍一下全局和局部的声明方式

		//在root下声明就是全局
		 :root{
            --bg-color:red; //全局自定属性
        }
        img{
        	//在其他样式中声明为局部  
            --bg-color2:blue;
            background: var(--bg-color); //当两个有两个自定义属性同名  局部优先级比外部高
        }

2.自定义属性目前的兼容性

图片来源