没有带框阴影的css

Question

我有2个网格列，一个有框阴影，但是只有当我在背景中使用透明色时，如果没有使用其他颜色，框阴影才会出现

代码：菜单

const MenuDashBoard = () => {
  const toggleMenu = useSelector(state => state.menuStatus.menuStatus);
  return (
      <GridMenu desktop={toggleMenu ? '240px' : '75px'} mobileGrid = {toggleMenu ? '31.25%' : '12.5%'} wdscreen = { toggleMenu? '80%' : '2%'} />
  );
}

css菜单：

export const gridMenuCss = css`
position: relative;
background: #fff !important;
padding: 0 !important;
height: 100vh;
box-shadow: 1px 0 10px rgba(29, 30, 58, .080) !important;
transition: all .3s;
`;

没有方框阴影的网格内容：

const MenuDashBoard = () => {
  const toggleMenu = useSelector(state => state.menuStatus.menuStatus);
  return (
      <Content desktop={toggleMenu ? "calc(100% - 240px)" : "calc(100% - 74px)"} mobileGrid = {toggleMenu ? '31.25%' : '12.5%'} wdscreen = { toggleMenu? '80%' : '2%'}>
        <h1>Home</h1>
      </Content>
  );
}

css：

export const gridContent = css`
position: relative;
background: transparent !important;
padding: 1rem !important;
height: 100vh;
transition: width 0.3s;`;

带有彩色背景

带透明框的阴影显示

Answer 1

已应用。您可以通过检查元素来确保已应用阴影。发生的事情是阴影的透明度与元素的淡蓝色形成了对比。

增加Alpha值或使用固定的较浅颜色，任何会给您所需结果的东西。请参阅以下示例，可能会有所帮助。

.try {
  padding: 20px;
  margin: 20px;
}

#try1 {
  position: relative;
  background: #fff;
  transition: width 0.3s;
  box-shadow: 1px 0 10px rgba(29, 30, 58, 0.08);
}

#try2 {
  position: relative;
  background: lightblue;
  box-shadow: 1px 0px 10px rgba(29, 30, 58, 0.08);
  transition: all .3s;
}

#try3 {
  position: relative;
  background: lightblue;
  box-shadow: 1px 0px 10px rgba(29, 30, 58, 0.5);
  transition: all .3s;
}

<div id="try1" class="try">try1: box is white so shadow is clear to see</div>
<div id="try2" class="try">try2: shadow color contrast happening</div>
<div id="try3" class="try">try3: shadow transparency is higher </div>