Question

我在CSS中介绍自己，它就像一个javaScript对象的结构，不知何故在这段代码中，我想在我的关键帧的border-bottom-width属性上使用.blm height属性类，这是代码和{ {3}}

pictureBox1.Image = images[0];

.blm {
  display: inline-block;
  background-color: pink;
  border: solid black 1px;
  height: 300px;
  width: 100px;
  animation: kk 3s linear 0s 2 normal;
  box-sizing: border-box;
}
@keyframes kk {
  0% {
    border-bottom-color: red;
    border-bottom-width: 0px;
  }
  100% {
    border-bottom-color: red;
    border-bottom-width: 300px;/* I want this to reference on .blm height property and maybe use percentage in it*/
  }
}
.blm2 {
  border: sold black 1px;
  width: 100px;
  height: 100px;/* also here, if this isn't child element */
  background: green;
}

Answer 1

目前，唯一的方法是使用css变量（IE或Edge不支持）：

:root {
  --shared-height: 300px;
}

.blm {
  display: inline-block;
  background-color: pink;
  border: solid black 1px;
  height: var(--shared-height);
  width: 100px;
  animation: kk 3s linear 0s 2 normal;
  box-sizing: border-box;
}

@keyframes kk {
  0% {
    border-bottom-color: red;
    border-bottom-width: 0px;
  }
  100% {
    border-bottom-color: red;
    height: var(--shared-height);
    /* i want this to reference  on .blm height property and maybe use percentage in it*/
  }
}

/* provides the default styles for the element unless
   the subsequent selector is more specific: */
.blm2 {
  border: sold black 1px;
  width: 100px;
  background: green;
  height: var(--shared-height);
}

/* if the .blm2 element has a specific ancestor
   (the obviously-named '.ancestorElementSelector')
   then this height will be used: */
.ancestorElementSelector .blm2 {
  height: 100px;
  /* also here, if this isn't child element */
}

CSS预处理器，例如SASS和LESS（可能是其中之一），允许使用变量，但在编译后编译为常规CSS。

这些可能值得探索，特别是如果需要Edge或IE，但由于我从未觉得需要使用它们，所以我不能明确地推荐它们。

是否可以从另一个元素引用css属性？

1 个答案: