The shadow of each border (box-shadow attribute)

Set the four borders of the border to different shadows (box-shadow attribute)

2. Code settings:

1. Code before setting

   box-shadow: none;

2. Code after setting

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

   (Disclaimer) The code here is taken from: https://blog.csdn.net/weixin_39877717/article/details/80625388

3.  

   After optimization, the code effect is as follows:

    

   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);    /*下边阴影 */

   The above is all about the "border shadow of each border (box-shadow attribute)".

Transfer from: https://blog.csdn.net/qq_35393869/article/details/102460983