css想修改个阴影，但是一直部署报错,为什么？如何覆盖默认的box-shadow样式？

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()的写法就会报错了

    box-shadow: 0px 6px 20px 0px #000000 !important;

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

解决了，改成rgba就好了，为什么别人rgb也可以设置透明度？我却会报错？