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属性) ” 的全部内容。

转自:https://blog.csdn.net/qq_35393869/article/details/102460983

猜你喜欢

转载自blog.csdn.net/z3287852/article/details/112790786