您现在的位置是:首页 > web开发 > 学习CSS自定义属性

学习CSS自定义属性

web开发作者:dayu日期:8天前点击:4

  变量为数值时不能与单位直接连用,需要用calc()函数进行拼接

  --foo:20;

  margin-top:var(--foo)px //无效

  margin-top:calc(var(--foo)*1px); // 有效

  变量带有单位时,不能是字符串,写成字符串无效。              

  /* 无效 */
  .foo {
    --foo: ‘20px‘;
    font-size: var(--foo);
  }

  /* 有效 */
  .foo {
    --foo: 20px;
    font-size: var(--foo);
  }

4.变量的作用域:变量的作用域与css层叠样式的规则一致             

  <style>
   :root { --color: blue; }
   div { --color: green; }
   #alert { --color: red; }
   * { color: var(--color); }
    </style>

   <p>blue</p>
   <div>green</div>
   <div>red</div>

  全局变量通常放在 :root {} 里面

基本的语法就这些,详情请看:http://www.ruanyifeng.com/blog/2017/05/css-variables.html。


学习CSS自定义属性

原文地址:http://www.cnblogs.com/wildWolf10041520/p/7224123.html


下一篇       上一篇