Css 盒子阴影不起作用的主要原因是什么

你好，我一直在努力寻找解决我的问题的方法，那就是我的盒子阴影不工作，我看到了其他关于堆栈溢出的类似问题，但都没有解决我的问题，我能得到一些帮助吗

下面的代码是我的反应组件

import React from "react";
import "../StyleSheet/MainDashBaordWindow.css";
const HomeDashContent = () => {
  return (
    <div className="DashBoardContent">
      <h1 className="DashBoardContent__header">Welcome Back!</h1>
      <div className="DashBoarContent__mainWindow">
        <div className="mainWindow__cards left-card">
          <h2>On Going Shipments</h2>
        </div>
        <div className="mainWindow__cards right-card">
          <h2>Finished Shipments</h2>
        </div>
      </div>
    </div>
  );
};

export default HomeDashContent;

.DashBoardContent {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.DashBoardContent__header {
  font-weight: bolder;
  margin-bottom: 2em;
}

.DashBoarContent__mainWindow {
  display: flex;
}

.mainWindow__cards {
  background-color: #f5f5f5f5;
  padding: 4em 2em;
  height: 30vh;
  transition: transform 0.4s;
  box-shadow: 2rem 2.5rem 2rem solid lightslategray;
}

.mainWindow__cards:hover {
  transform: scale(1.1);
}

.left-card {
  margin-right: 5em;
}

.right-card {
  margin-left: 5em;
}

---

“实体”值不适用于长方体阴影属性。只需尝试将长度值（如1px）作为“排列”值（这是“长方体阴影”的第四个属性值），而不是“实体”，它就会起作用。

与任何其他不起作用的属性相同。该值无效。我不知道什么值无效？

solid

是

box shadow

属性中的无效值。请尝试使用

box shadow:2rem 2.5rem 2rem lightslategray您应该阅读不允许使用“实体”的框阴影规范。