相关疑难解决方法(0)

为什么使用 CSS 变量设置继承的显示属性不起作用？

我将 div 的显示属性设置为in line-block。然后我创建了四个类：

no-var，将显示设置为inherit
var，它将显示设置为变量inherit
var-none，将显示设置为变量none
var-default，将显示设置为变量设置为inherit，默认值为grid

不过，每个类使用的实际样式似乎并不正确：

no-var 类正确继承了 display 到block
var 类不会inherit从变量中获取值并显示为inline-block
var-none 类正确设置显示none并隐藏
var-default 类不会inherit从变量中获取值并将显示设置为默认值

对于每个类，我添加了颜色属性的变量和默认值，它们都按预期工作。inherit变量和值是否应该被忽略unset？

:root {
  --display: inherit;
  --display-none: none;
  --color: red;
}
div  {
  display: inline-block;
  color: green;
}
.no-var {
  display: inherit;
  color: red;
}
.var {
  display: var(--display);
  color: var(--color);
}
.var-none {
  display: var(--display-none);
}
.var-default {
  display: var(--display, grid); …

Run Code Online (Sandbox Code Playgroud)

html css css-variables

Gam*_*mes

2020 06-01

4
推荐指数

1
解决办法

1972
查看次数

如何在CSS自定义属性（又称为CSS变量）中存储继承值？

让我们考虑这个简化的示例，以说明问题：

:root {
  --color:rgba(20,20,20,0.5); /*defined as the default value*/
}

.box {
  width:50px;
  height:50px;
  display:inline-block;
  margin-right:30px;
  border-radius:50%;
  position:relative;
}
.red {background:rgba(255,0,0,0.5);}
.blue {background:rgba(0,255,0,0.5);}

.box:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  border-radius:50%;
  transform:translateX(30px);
  background:var(--color);
  filter:invert(1);
}

Run Code Online (Sandbox Code Playgroud)

<!-- we can add any color we want -->
<div class="box red" style="--color:rgba(0,255,0,0.5);">
</div>
<div class="box blue" style="--color:rgba(0,255,255,0.5);">
</div>

<!-- we can add the same color but this won't be dynamic -->
<div class="box red" style="--color:rgba(255,0,0,0.5);">
</div>

<!-- it would be good to be able to inherit the …

Run Code Online (Sandbox Code Playgroud)

css css3 css-variables

Tem*_*fif

2019 01-18

4
推荐指数

1
解决办法

327
查看次数