2021-01-13

CSS函数

前情提要：链接 - - CSS函数（值得学习 & 研究 & 保存 & 收藏）；

一、var() 函数：

1. 设置背景颜色background；
2. 设置字体颜色color；
3. 设置边框颜色border-color；
4. 设置text-shadow、box-shadow颜色；

:root {
  --main-bg-color: coral;
}
 /*用伪类root设置-- :root 结合 -- 来实现*/
#div1 {
  background-color: var(--main-bg-color);
}
 
#div2 {
  background-color: var(--main-bg-color);
}

5. 具体应用：制作3D效果的按钮：

CSS样式：

	:root {
		/*橙色按钮的颜色*/
		--main-color1: rgb(255, 160, 65);
		--jj-color1: rgb(235, 140, 60);
		/*绿色按钮的颜色*/
		--main-color2: rgb(70, 160, 90);
		--jj-color2: rgb(70, 190, 90);
	}
	a.active {
		display: block;
		margin: 10px;
		width: 80px;
		height: 40px;
		color: white;
		border-radius: 10px;
		cursor: not-allowed;
		text-align:center;
		text-decoration: none;
		line-height: 40px;
		/*橙色按钮的颜色为变量 --main-color1代表的颜色*/
	    background-color:  var(--jj-color1);
	    box-shadow: 3px 5px 1px var(--main-color1),
		   -2px 5px 1px var(--main-color1),
		   -2px -1px 1px var(--main-color1),
		   3px -1px 1px var(--main-color1);
		
	}
	a.active:nth-child(2) {
		/*绿色按钮的颜色为变量 --main-color2代表的颜色*/
		background-color:  var(--jj-color2);
        box-shadow: 3px 5px 1px var(--main-color2),
		   -2px 5px 1px var(--main-color2),
		   -2px -1px 1px var(--main-color2),
		   3px -1px 1px var(--main-color2);
	}

HTML结构：

 <a class="active" href="JavaScript:;">点击我</a>
 <a class="active" href="javascript:;">点击我</a>