css - CSS3 盒子阴影仅在左上角和右上角

Question

我需要为客户创建这种阴影效果，但不知道如何完成：

这甚至可以用纯 CSS 实现吗？

编辑：这是我当前的 CSS：

box-shadow: 0 0px 0px #fff, 
            0 -1px 15px #ccc, 
            0 0px 0px #fff, 
            0 0px 0px #fff;

-webkit-box-shadow: 0 0px 0px #fff, 
                    0 -1px 15px #ccc, 
                    0 0px 0px #fff, 
                    0 0px 0px #fff;

-moz-box-shadow: 0 0px 0px #fff, 
                 0 -1px 15px #ccc, 
                 0 0px 0px #fff, 
                 0 0px 0px #fff;  

Answer 1

this other answer that I stole from Another Stack OverFlow Question

use the spread value...

box-shadow has the following values

box-shadow: x y blur spread color;

so you could use something like..

box-shadow: 0px -10px 10px -10px black;

here is another answer from the same Question

You can give multiple values to box-shadow property eg

-moz-box-shadow: 0px 10px 12px 0px #000,
                0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
                0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
        0px -10px 12px 0px #000;

it is drop shadow to left and right only, you can adapt it to your requirements

EDIT

I was looking that the OP's Post and I think that if you tried this,

box-shadow: 0 0px 0px #fff, 
        0 -1px 15px #ccc, 
        0 0px 0px #fff, 
        0 -1px 15px #ccc;

I think that it should show the way that you are thinking it should.

I assume that the values go in Clockwise Order like Borders or margins or whatever,

Attribute: top, right, bottom, left;

and that you should be able to add a value to the left as you would with the right. you might have to play around with it a little bit though.