本文介绍了如何使用CSS box-shadow为元素设置三条边的阴影效果，详细解析了box-shadow的参数含义，并通过立方体的平行透视原理帮助理解如何调整阴影偏移，以创建不同方向的阴影。同时，分享了如何通过控制x轴和y轴偏移来实现不同边的阴影效果。
在做udacity的css assignments的时候，遇到一个问题就是如何设置一个图片三条边上的阴影。
之前我一直认为box-shadow是只能设置两条边的，即右边和底部两条边。
MDN上有说明：
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;其中10px, 5px就是设置横坐标x轴的偏移以及纵坐标y轴的偏移，即右边的阴影偏移10px，底部的阴影向下偏移5px。
当看到udacity作业的原型图说要设置三条边我就懵圈了。How to do that?!
后来bing了一些资料，发现是可以做到的，只是要分别设置每条边的属性，以及用逗号分隔开，最后以分号结束。
比如上图我就是以如下的形式实现的：
box-shadow:
0
最低0.47元/天 解锁文章
扫一扫
5111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
