ReactJS中div无法显示box-shadow阴影样式的解决方法咨询

你的div阴影不显示的核心原因是box-shadow语法错误：你将两个颜色值（rgb(199,230,242)和rgba(0, 0, 0, 0.75)）直接拼接，不符合CSS阴影的语法规则，导致浏览器无法解析整个阴影声明。

CSS inset阴影的正确语法 #

box-shadow: inset <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

颜色部分只能有一个合法的颜色值（支持rgb、rgba、十六进制等格式），不能同时写两个颜色。

修复后的代码 #

根据需求，提供两种常见修复方向：

方向1：合并颜色值

如果你想要rgb(199,230,242)带0.75的透明度，直接将颜色合并为rgba(199,230,242, 0.75)：

<div
  className="text-white"
  style={{
    boxShadow: `inset 0px 131px 64px -44px rgba(199,230,242, 0.75)`,
    height: '100px',
    width: '100px',
  }}
></div>

方向2：调整阴影参数（解决阴影超出容器问题）

你设置的131px垂直偏移量远大于div的100px高度，阴影会完全超出容器范围导致看不到。可以适当减小参数，让阴影在容器内可见：

<div
  className="text-white"
  style={{
    boxShadow: `inset 0px 20px 15px -5px rgba(199,230,242, 0.75)`,
    height: '100px',
    width: '100px',
  }}
></div>

额外说明 #

现代主流浏览器（Chrome、Firefox、Edge等）已完全支持标准box-shadow，无需额外添加WebkitBoxShadow和MozBoxShadow前缀，除非需要兼容极老旧的浏览器版本。

内容的提问来源于stack exchange，提问作者Jasir Limani