如何使用 Tailwind CSS 将多色框阴影应用于 React 中的倒计时组件？

Question

我正在使用 Tailwind CSS 和内联样式在 React 中开发一个倒计时组件。我想在容器周围应用多色阴影效果，但我似乎无法正确显示颜色。框阴影要么仅显示一种颜色（橙色），要么不按预期显示。

'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;

我想在显示倒计时器的容器周围应用多色阴影（黄色、红色和深红色）。

但是，只出现橙色阴影，其他颜色似乎被覆盖或不可见。

Answer 1

由于前两个值 (<0> <0> 20px 5px rgba(255, 173, 0, 0.3)) 为 0，因此您的 3 种不同的 boxShadow 颜色都直接放置在容器后面。如果您想要与第一个示例类似的效果，您将boxShadow 中需要 6 个值而不是 3 个，并且每个值都需要放置在容器边缘的不同点，即

 -10px -10px 20px 5px rgba(255, 0, 0, 0.3),   /* Dark Red (#FF0000) - top left */
  10px 10px 20px 5px rgba(255, 0, 0, 0.3),     /* Dark Red (#FF0000) - bottom right */
  0px -10px 20px 5px rgba(255, 56, 56, 0.3),   /* Red (#F53838) - middle top */
  0px 10px 20px 5px rgba(255, 56, 56, 0.3),    /* Red (#F53838) - middle bottom */
  10px -10px 20px 5px rgba(255, 173, 0, 0.3),  /* Yellow (#FFAD00) - top right */
 -10px 10px 20px 5px rgba(255, 173, 0, 0.3)   /* Yellow (#FFAD00) - bottom left */

有关盒子阴影的更多信息