border每个边框的阴影（box-shadow属性）

分别设置border四个边框为不同阴影（box-shadow属性）

---

一、效果图对比：

---

二、代码设置：

1. 设置前的代码

   box-shadow: none;
   

2. 设置后的代码

   box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/
   
                   -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/
   
                   10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/
   
                   0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/
   

   （免责说明）此处代码截取自：https://blog.csdn.net/weixin_39877717/article/details/80625388

3. 优化后 · 代码效果如下：

   box-shadow:    0px -10px 0px 0px rgba(0,0,0,0),   /*上边阴影  透明*/
   
                   -10px 0px 0px 0px rgba(0,0,0,0),   /*左边阴影  透明*/
                   
                   10px 0px 0px 0px rgba(0,0,0,0),    /*右边阴影  透明*/
                   
                   0px 10px 30px 0px rgba(0,0,0,0.1);    /*下边阴影 */
   
   

---

以上就是关于“ border每个边框的阴影（box-shadow属性） ” 的全部内容。