Box-shadow 不适用于元素，如何解决？

Question

I have three bars of player status, ie health, experience, and mana. Health and Mana bars have a normal size and exp bar is minimized.

I apply box-shadow for each of them, styles are almost the same for all bars, however box shadow is not displayed for minimized bar. I tried to fix that and noticed that when I change spread radius to positive value, box shadow appears. If the spread radius is negative, box shadow is not displayed at all.

The code of PARENT element looks this way:

            <div className={styles.barContainer}>
              <Bar
                color={healthBar.color}
                height={healthBar.height}
                currentValue={healthCurrent}
                maxValue={healthMax}
              />
            </div>
            <div className={classNames(styles.barContainer, styles.barContainerSmall)}>
              <Bar
                size="small"
                color={expBar.color}
                height={expBar.height}
                currentValue={expCurrent}
                maxValue={expMax}
              />
            </div>
            <div className={styles.barContainer}>
              <Bar color={manaBar.color} height={manaBar.height} currentValue={10} maxValue={10} />
            </div>

The Bar component looks this way:

      <div
        className={classNames(styles.bar, {
          [styles.smallBar]: size === 'small',
        })}
      >
        <div
          className={styles.barInner}
          style={{
            backgroundColor: color,
            width: `${Math.min(widthPercentage, 100)}%`,
          }}
        />
        {size !== 'small' && (
          <span className={styles.text} style={{ fontSize }}>
            <span className={styles.biggerNumber}>{currentValue}</span>/<span>{maxValue}</span>
          </span>
        )}
      </div>

And styles for the Bar:

    .bar {
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  height: 10px;
}

.smallBar {
  height: 5px;
}

.barInner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5));
  transition: 0.4s linear;
  transition-property: width;
  animation: progressAnimation 0.5s;
  box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.75);
}

.text {
  position: absolute;
  top: -3px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /** TODO: Change font color depending on contrast: https://css-tricks.com/reverse-text-color-mix-blend-mode/ */
  color: #fff;

}

.text .biggerNumber {
  font-size: 20px;
  font-weight: bolder;
}

Answer 1

Based on MDN docs , spread radius has the effect of growing or shrinking box shadows relative to the element's dimensions:

Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink.

Since you're using a spread radius of -4px , this means that the edges of the shadow will be inset 4px from the edges of the element. If your element has insufficient dimensions (ie width <8px or height <8px, as 4px * 2 = 8px ), the box shadow will not show since it will have a dimension of <0px in either axes.

Here is a proof-of-concept example, using the same box-shadow properties (but I increased the y offset to make it more obvious). Notice that the box shadow will only be rendered at elements of width >=9px:

 html, body { padding: 0; margin: 0; } #stage { display: flex; align-items: center; justify-content: space-around; height: 100vh; }.box { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background-color: #ddd; box-shadow: 0 100px 4px -4px rgba(0, 0, 0, 0.75); }

 <div id="stage"> <div class="box"></div> <div class="box" style="width: 80px;"></div> <div class="box" style="width: 60px;"></div> <div class="box" style="width: 40px;"></div> <div class="box" style="width: 20px;"></div> <div class="box" style="width: 10px;"></div> <div class="box" style="width: 9px;"></div> <:-- No box shadow expected --> <div class="box" style="width; 8px;"></div> </div>