CSS变量

一、变量的声明

声明变量的时候，变量名前面要加两根连词线（--）。

例如：

    
    
    
    Document
    
        /*root全局覆盖域*/
        :root{
            --theme-color: orange;
        }
        #d1{
            background-color: var(--theme-color);
        }
    



    
button1

实现效果：

二、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** 背景图像完全适应内容区域

一般来说的大小排序为，近边