相关疑难解决方法(0)

所以我知道如何用CSS3做一个基本的盒子阴影.您可以在下图中看到它.

我想要实现的效果是3D盒子阴影,如下图所示.

有关如何使用CSS3框阴影执行此操作的任何想法？

如何减少这个代码(可能有一个循环？),有一个"功能",它需要方向和数字？

• @dir =想要的"方向"
• @number =我需要多少次阴影(这里是10次)
• @color =阴影的颜色

示例(工作,但不是很容易使用):

.perspective-box(@dir, @number, @color) when (@dir = se){
   -webkit-box-shadow:1px 1px 0 0 @color,
                      2px 2px 0 0 @color,
                      3px 3px 0 0 @color,
                      4px 4px 0 0 @color,
                      5px 5px 0 0 @color,
                      6px 6px 0 0 @color,
                      7px 7px 0 0 @color,
                      8px 8px 0 0 @color,
                      9px 9px 0 0 @color,
                      10px 10px 0 0 @color;
}

我有一个@dir改变阴影方向的参数.在这个例子中,我把@dir = se,在哪里se=东南.对于西北,东北,西南和东南来说,情况也是如此.

怎么避免这个...？

.perspective-box(@dir, @number, @color) …