Tengo tres barras de estado de jugador, es decir, salud, experiencia y maná. Las barras de salud y maná tienen un tamaño normal y la barra de experiencia está minimizada.
Aplico sombra de cuadro para cada una de ellas, los estilos son casi iguales para todas las barras, sin embargo, la sombra de cuadro no se muestra para la barra minimizada. Traté de arreglar eso y noté que cuando cambio el radio de dispersión a un valor positivo, aparece la sombra del cuadro. Si el radio de dispersión es negativo, la sombra del cuadro no se muestra en absoluto.
El código del elemento PADRE se ve de esta manera:
<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>El componente Bar se ve de esta manera:
<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>Y estilos para la Barra:
.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; }Según los documentos de MDN , el radio de extensión tiene el efecto de aumentar o reducir las sombras de los cuadros en relación con las dimensiones del elemento:
Los valores positivos harán que la sombra se expanda y crezca, los valores negativos harán que la sombra se reduzca.
Dado que está utilizando un radio de dispersión de -4px , esto significa que los bordes de la sombra se insertarán a 4px de los bordes del elemento. Si su elemento tiene dimensiones insuficientes (es decir, ancho <8px o alto <8px, como 4px * 2 = 8px ), la sombra del cuadro no se mostrará ya que tendrá una dimensión de <0px en cualquiera de los ejes.
Aquí hay un ejemplo de prueba de concepto, usando las mismas propiedades box-shadow (pero aumenté el desplazamiento y para que sea más obvio). Tenga en cuenta que la sombra del cuadro solo se representará en elementos de ancho >=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>