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>