CSS变量

最新推荐文章于 2024-05-29 22:27:45 发布

HM-hhxx！

最新推荐文章于 2024-05-29 22:27:45 发布

阅读量572

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/damadashen/article/details/122526287

版权

一、变量的声明

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

例如：

<!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)

由中心向四周渐变，四周暗中间亮。

HM-hhxx！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS变量

一、变量的声明声明变量的时候，变量名前面要加两根连词线（--）。例如：<!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,
复制链接

扫一扫