如何为React+Tailwind倒计时组件添加多色box-shadow？

问题 #

使用React + Tailwind CSS开发倒计时组件时，尝试通过内联样式给倒计时容器添加#FFAD00（黄橙色）、#F53838（红色）、#FF0000（深红色）的多色box-shadow效果，但目前仅能看到黄橙色阴影，其余颜色被覆盖或无法正常显示。相关代码如下：

'use client';

import React, {useState, useEffect} from 'react';

interface CountdownProps {
  header1: string;
  header2: string;
  headerClass?: string;
}

const CountdownComponent: React.FC<CountdownProps> = ({
  header1,
  header2,
  headerClass = 'text-[30px] font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-[#ffd22f]',
}) => {
const [timeLeft, setTimeLeft] = useState({
  days: 999,
  hours: 99,
  minutes: 99,
  seconds: 99,
});

useEffect(() => {
  const countDownDate = new Date('2024-09-31T23:59:59').getTime();

  const timer = setInterval(() => {
    const now = new Date().getTime();
    const distance = countDownDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor(
      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    setTimeLeft({days, hours, minutes, seconds});

    if (distance < 0) {
      clearInterval(timer);
      setTimeLeft({days: 0, hours: 0, minutes: 0, seconds: 0});
    }
  }, 1000);

  return () => clearInterval(timer);
}, []);

// Function to pad numbers to two digits
const formatTime = (time: number) => {
  return time < 10 ? `0${time}` : time.toString();
};

return (
  <>
    <div className="w-[370px] sm:w-full max-w-[720px] mx-auto text-center text-white mt-10">
      <h3 className={`${headerClass}`}>{header1}</h3>
      <h3 className={`-mt-[6px] ${headerClass}`}>{header2}</h3>
    </div>
    <div
      className="relative w-[370px] sm:w-full max-w-[720px] mt-6 rounded-2xl"
      style={{
        boxShadow: `
          0 0 20px 5px rgba(255, 173, 0, 0.3),   /* Yellow (#FFAD00) */
          0 0 20px 5px rgba(255, 56, 56, 0.3),   /* Red (#F53838) */
          0 0 20px 5px rgba(255, 0, 0, 0.3)      /* Dark Red (#FF0000) */
        `,
        background: 'linear-gradient(180deg, #28272F 0%, #040404 100%)',
      }}
    >
      {/* Background box with gradient and shadow */}
      <div className="relative bg-custom-gradient-shopping-1 rounded-2xl p-8 text-white text-center">
        <div className="flex justify-center items-center gap-1 text-[41px]">
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.days)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              DAYS
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.hours)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              HOURS
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.minutes)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              MINUTES
            </span>
          </div>
          <span className="text-4xl text-gray-400 pb-4 pl-1">:</span>
          <div className="flex flex-col items-center">
            <span className="font-[500] tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              {formatTime(timeLeft.seconds)}
            </span>
            <span className="text-[10px] font-bold tracking-wide bg-clip-text text-transparent bg-gradient-to-b from-white to-gray-600">
              SECONDS
            </span>
          </div>
        </div>
      </div>
    </div>
    {/* Last month's info */}
    <div className="font-semibold text-xs text-gray-400 mt-8 text-center">
      The winner will be announced
      <br />
      via email on May 31st.
    </div>
  </>
);
};

export default CountdownComponent;

解决方案 #

问题原因 #

当前三个box-shadow的偏移、模糊半径、扩散半径参数完全一致，后定义的阴影会覆盖前面的，最终只能看到最上层的混合色调阴影。要实现多色分层效果，需要调整各层阴影的范围参数，或者改用filter: drop-shadow()实现叠加。

方案1：调整box-shadow参数分层 #

通过修改每层阴影的模糊半径和扩散半径，让不同颜色的阴影呈现出从内到外的分层效果，比如深色阴影范围小、浅色阴影范围大：

<div
  className="relative w-[370px] sm:w-full max-w-[720px] mt-6 rounded-2xl"
  style={{
    boxShadow: `
      0 0 10px 2px rgba(255, 0, 0, 0.5),   /* 内层深红色，范围小、透明度高 */
      0 0 20px 6px rgba(255, 56, 56, 0.4), /* 中层红色，范围中等 */
      0 0 30px 10px rgba(255, 173, 0, 0.3) /* 外层黄橙色，范围大、透明度低 */
    `,
    background: 'linear-gradient(180deg, #28272F 0%, #040404 100%)',
  }}
>
  {/* 内部内容保持不变 */}
</div>

方案2：使用filter: drop-shadow()叠加 #

drop-shadow支持多层独立叠加，不会互相覆盖，适合实现彩色光晕效果：

<div
  className="relative w-[370px] sm:w-full max-w-[720px] mt-6 rounded-2xl"
  style={{
    filter: `
      drop-shadow(0 0 10px rgba(255, 173, 0, 0.3))
      drop-shadow(0 0 15px rgba(255, 56, 56, 0.3))
      drop-shadow(0 0 20px rgba(255, 0, 0, 0.3))
    `,
    background: 'linear-gradient(180deg, #28272F 0%, #040404 100%)',
  }}
>
  {/* 内部内容保持不变 */}
</div>

注意：drop-shadow没有box-shadow的扩散半径参数，只能通过模糊半径控制阴影大小，且阴影会跟随元素的圆角轮廓显示。

内容的提问来源于stack exchange，提问作者Prosy A.