/*全局变量保存的地方*/
:root {
--main-bg-color: red; /* 变量名必须以--开头 */
}

var(custom-property-name, value)
描述
custom-property-name 必需。自定义属性的名称,必需以 -- 开头。
value 可选。备用值,在属性不存在的时候使用。

举例使用:
#div1 {
background-color: var(--main-bg-color);
} #div2 {
background-color: var(--main-bg-color);
}
 
 

CSS函数var的更多相关文章

  1. css - 原生变量及使用函数 var()

    零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过  --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章 ...

  2. JS里的CSS函数

    <title>无标题文档</title> <script> function css(obj,name,value){ if(arguments.length==2 ...

  3. agruments应用——求出函数参数的总合&&css函数——设置/读取对象的属性&&当前输入框高亮显

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CSS函数大全

    CSS函数(方法)参考 CSS函数用作各种CSS属性的值. 函数 描述 attr() 返回所选元素的属性值 calc() 允许您执行计算以确定CSS属性值 cubic-bezier() 定义Cubic ...

  5. Vue style与css的var()

    vue绑定style直接给css的var变量传递一个值,然后结合css的var()函数使用这个值. 在data里面定义一个变量然后给定一个值,后期修改这个值之后,所有依赖这个变量的css样式都会被响应 ...

  6. CSS函数

    布局时发现CSS居然能进行计算,cale()函数用于动态计算长度值 html,body的height为100%,黑框浮动width为200px,橙框处标准流,由于浮动最初目的是为了实现文字环绕,所以文 ...

  7. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  8. css函数——calc()和attr()

    css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...

  9. js基础-函数-var和let的区别

    javaScript简介 javaScript历史 1995年,Netscape公司是凭借Navigator浏览器成为当时第一代互联网公司. 网景公司希望在HTML界面上加一点动态效果,于是叫Bren ...

  10. css中var函数

    引言: 在学习elementui的时候看到一个var.css, 其中写的全部都是以--开头的属性,上google查询不是css3新增的属性,于是决定一探究竟 :root { /* Transition ...

随机推荐

  1. deployment.yml参考

    apiVersion: apps/v1kind: Deploymentmetadata: labels: com.xx.service: xxxxxxxxxxxxx name: xxxxxxxxxxx ...

  2. host头攻击

    一.问题源起 HTTP1.1规范中在增加了HOST头信息,用于存储服务端与客户端的路由信息. 例如: Request的Header里就有一个标名请求,它是用来记录服务端网站域名的. 如果前端或者后台正 ...

  3. Docker学习——Kubernetes(八)

    在线阅读:GitBook 下载:pdf Kubernetes 是 Google 团队发起并维护的基于 Docker 的开源容器集群管理系统,它不仅支持常见的云平台,而且支持内部数据中心. 建于 Doc ...

  4. 使用Wireshark完成实验2-TCP

    1.打开Google Chorme,进入https://gaia.cs.umass.edu/wireshark-labs/alice.txt 2.将文本保存,进入https://gaia.cs.uma ...

  5. Opengl数学markdown

    # opengl数学 $$\begin{Bmatrix} {A_{x}}\\ {A_{y}}\\ {A_{z}}\\ \end{Bmatrix} * \begin{Bmatrix} {B_{x}}\\ ...

  6. 【flask】建站经验随笔

    [前端] 1.前端table标签中每行使用template中 {%for i in rows%} {% endfor %}来生成之后,如果想对每行进行一个button处理,此时如果使用jquery的$ ...

  7. openSUSE Tumbleweed 安装原生微信

    优麒麟网站上有![微信原生版](https://www.ubuntukylin.com/applications/106-cn.html)提供下载. 之前用 Ubuntu的时候,直接安装就可以使用. ...

  8. docker build提示 error checking context:can't stat xxx

    这个提示基本是权限不够外加目录结构不对,保险的做法直接删除 Dockerfile. 正确做法:(可能还有其他的解决方案吧,这个可以生效) 重新建个目录,给目录授权,然后再dockerfile文件夹中建 ...

  9. 数组(Java)

    数组的定义 数组是相同类型数据的有序集合 数组描述的是相同类型的若干数据,按照一定的先后次序排列组合而成 其中,每个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们 数组的声明和创建 基本 ...

  10. uniapp中使用echarts点击图例与tooltips无反应

    只需要在项目main.js文件中加上 window.wx = {} // echarts中tooltips点击无反应与点击图例无反应解决方法 即可