返回列表 回复 发帖

[div+css教程] CSS自定义属性也被称为CSS变量

你可以通过--设置CSS变量和通过var(--varName)访问已声明的变量。这是一个非常基本的方法,可以像下面声明一个变量和让文本的颜色为red:
  1. div {
  2.     --color: red;
  3.     color: var(--color);
  4. }
复制代码
动态JavaScript+CSS

使用CSS变量,我们现在可以更容易地通过JavaScript更新它的值。这意味着,我们不需要使用内联属性样式或者更新类名。我们可以简单通过替换CSS变量的值。

可以像下面那样给:root传递值:
  1. :root{
  2.         --gradientAngle:60deg;
  3. }

  4. .button-gradient {
  5.     background: linear-gradient(var(--gradientAngle), var(--gradientStart),var(--gradientStop));
  6.     /*--gradientAngle: 60deg;*/
  7.     --gradientStart: lightpink;
  8.     --gradientStop: lightyellow;
  9.     height:100px;
  10.    
  11.     @apply --base-colors;
  12. }
  13. .button-gradient:hover {
  14.     --gradientAngle: 0deg;
  15. }
复制代码
在浏览器控制面板中
  1. document.documentElement.style.setProperty('--gradientAngle','-180deg');
复制代码
动态属性片段

CSS变量有一个很酷的功能需要注意,那就是如何在属性值中指定CSS变量。虽然以前我们单独使用border来声明边框,现在我们可以使用变量更新属性的任何部分,包括缩写的border或者是不知道参数的阴影和渐变属性。

比如这个示例:
  1. .button-gradient {
  2.     background: linear-gradient(var(--gradientAngle), var(--gradientStart),var(--gradientStop));

  3.     --gradientAngle: 60deg;
  4.     --gradientStart: lightpink;
  5.     --gradientStop: lightyellow;
  6. }

  7. .button-gradient:hover {
  8.     --gradientAngle: 0deg;
  9. }
复制代码
转载自:
http://www.w3cplus.com/css/local-css-vars.html

参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*
返回列表