Q:

only top box-shadow (same style with another div's box-shadow style but only top)

please refer to http://jsfiddle.net/3fTyt/806/
I need box 2 has the same box shadow style with box 1 but only top of box 2 must be shadowed.
I tried a lot but couldn't find a solution. Can you please help? regards.
Codes in jsfiddle
CSS
#box1 {
    background: #fff;
    box-shadow:  0 0 10px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}
#box2
{
    background: #fff;

    box-shadow: 0 0 10px 1px rgba(0,0,0,.1), 0  -1px 1px rgba(0,0,0,.99);

    font: bold 18px/1.2em sans-serif;
    height: 100px;
    margin: 15px auto;
    padding: 75px 15px 25px;
    text-align: center;
    width: 200px; float:left; margin:50px;
}

HTML
<div id="box1">box 1</div>
<div id="box2">box 2: only top shadow is required and should has same shadow style with box 1</div>

A:

You might try something like this :
#box2 {
  box-shadow: 0px -10px 10px -10px rgba(0,0,0,.99);
  ...
}

Why these settings ?

horizontal offset = 0px : no horizontal offset,
vertical offset = -10px : 10px to the top,
blur radius = 10px : just used the same value as #box1,
spread distance = -10px : as for spread distance, a positive value would expand the shadow, but a negative value make it "shrink" (see the box-shadow documentation here). As we're using a 10px blur radius, we need to use at least a -10px spread distance to avoid seeing any shadow on the left, right and bottom sides.

Which gives us a pretty cool result, I think. Pretty close from what you were looking for :

