一、变量的声明
声明变量的时候,变量名前面要加两根连词线(--)。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*root全局覆盖域*/
:root{
--theme-color: orange;
}
#d1{
background-color: var(--theme-color);
}
</style>
</head>
<body>
<div><button id="d1">button1</button></div>
</body>
</html>
实现效果:
二、var()函数
var()函数用于读取变量。
例如:
a {
color: var(--foo);
text-decoration-color: var(--bar);
}
var后面可以追加当没有值的时候,使用备用方案,如:
background-color: var(--theme-color, red);
三、变量值的类型
如果变量值是一个字符串,可以与其他字符串拼接。 例如:
--bar: 'hello';
--foo: var(--bar)' world';
如果变量值是数值,不能与数值单位直接连用。 例如:
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
上面代码中,数值与单位直接写在一起,这是无效的。必须使用calc()函数,将它们连接。
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
如果变量值带有单位,就不能写成字符串。
/* 无效 */.foo { --foo: '20px'; font-size: var(--foo);}
/* 有效 */.foo { --foo: 20px; font-size: var(--foo);}
三、CSS背景渐变
1.线性渐变
基本语法格式:
background: linear-gradient( [ angle | to side-or-corner , ] ? color-stop [ , color-stop]+ )
第一个参数是代表渐变的角度方向,可以是角度值或者方向顺序。
第二个及之后的参数是颜色值与其起止位置
默认角度为180deg,代表渐变方向是垂直向下的,90度是水平向右,对应的方向顺序也可写成to bottom、to right
例如:
background: liner-grandient(to right, blue, 80%,red);
效果为从左到右由蓝色渐变到红色,渐变中心在80%位置。
2.径向渐变
基本语法格式:
background: **radial-gradient**( [ **bg-position** || **angle**, ] ? [ **shape** || **size**, ] ? **color-stop**, **color-stop** [ , **color-stop**]* )
第一个参数是代表渐变的位置,可以是方向的含义,也可以是确切的数值,默认在中心位置 。
第二个参数是渐变的形状和大小,形状可以是圆形或者椭圆,大小有以下几个值
- **closest-side** 近边
- **closest-corner** 近角
- **farthest-side** 远边
- **farthest-corner** 远角
- **contain** 背景图像完全覆盖背景区域
- **cover** 背景图像完全适应内容区域
一般来说的大小排序为,近边<近角<远边<远角,这是由于圆心到边的垂直距离要比点到角的距离更近,contain、cover和background-size中的contain、cover属性类似。
第三个及之后的参数是颜色值与其起止位置,与线性渐变一致。
例如:
background: radial-gradient(transparent,#333)
由中心向四周渐变,四周暗中间亮。