一些属性会破坏其他属性吗？

Question

Codepen page

Webpage hosted with Google Drive如果你想用图片看到它（front.html）

相关代码：

.row1 img{
    /*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.blue-border{
    border: 4px solid rgb(0,102,179);
}
.orange-border{
    border: 4px solid rgb(208,78,29);
}
.title-blue,.blue-border,.title-orange,.orange-border{
    box-shadow: 5px 5px 7px rgb(117,117,117);
}

我正在为我的学校创建一个网页，我需要在4个元素上创建插入框阴影：第一行中的两个图像，第二行中的.blue-border和.orange-border div 。但是，已经有一个box-shadow属性应用于边框，因此应用新的box-shadow属性会取消原始属性。此外，当我对.row1（ln 25）中的图像应用box-shadow属性时，边框的阴影会中断。我如何规避CSS无法使用不同参数处理2个相同属性的事实？为什么.row1中的图像上的盒子阴影打破了.blue-border和.orange-border类的盒子阴影？

谢谢！