css想修改个导航栏增加个阴影，但是一直部署报错

经过尝试知道是box-shadow这行样式有错，注释掉就不会报错。

header nav.navbar {
    height: 0px; //清除默认高度样式
    min-height: 40px;
    background: #F2F2F2;

    // box-shadow: 1px 6px 20px 1px rgb(0 0 0 / 50%) !important;//报错
}

哪怕我直接指定id来设置样式也是报错：

#navbar-main {
     box-shadow: 1px 6px 20px 1px rgb(0 0 0 / 50%) !important; //报错
}

究竟问题出现在哪里？按道理他默认的样式哪怕被!important之后我的选择器特异性更高，优先级更高才对啊？为什么用!important覆盖不了？还报错？

问题补充：

刚刚又试了一下，把rgb的颜色改成#000000的格式就不会报错了，为什么rgb(0,0,0 , 50%)就会报错？难道是不支持透明度？但是我这个是在浏览器的开发者工具里面用阴影编辑器调完后给出的代码呀。。。？😳

改成rgba就好了