分别设置border四个边框为不同阴影(box-shadow属性)
二、代码设置:
-
设置前的代码
box-shadow: none;
-
设置后的代码
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
-
优化后 · 代码效果如下:
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