How to Create a Box-Shadow That Covers the Entire Page

Add CSS box shadow around the whole DIV

You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:

-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;

Css shadow entire screen length

You can add a spread parameter to the shadow (not exactly the same appearance, but at least it does what you ask for):

html,

body {

  margin: 0;

}

.TopBar {

  height: 40px;

  background: #444;

  box-shadow: 0px 4px 24px 16px black;

}

<div class="TopBar"></div>

Creating a CSS3 box-shadow on all sides but one

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

How to create a box with cut off corner and shadow? (Boxed Website design)

You where very close!

If you use a clip-path you can cut both the header and the main part of the box.
When you then set the drop-shadow filter on the main element you should get the desired style.

#main1 {

  height:500px;

  width:500px;

  filter: drop-shadow(0px 0px 10px blue);

}

#wrap {

  width:500px;

  height:500px;

  background: linear-gradient(135deg, transparent 70px,green 0);

  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);

  position:absolute;

}

header {

  height:55px;

  max-width:100%;

  background-color:#eee;

  position: relative;

}

<div id ="main1">

  <div id ="wrap">

    <header>

    </header>

    <main>

    </main>

  </div> 

</div>

How to make a drop shadow go all the way across the edge of a div, not inset

To avoid the top shadow, add vertical offset and adjust your other parameters accordingly. In addition, set the spread distance to be 0 or greater and you'll cover your horizontal border.

Start with this:

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

If you're not getting the full horizontal border covered, increase the 4th value slightly until it looks good. Adjust your vertical offset accordingly as well if needed.

It would be helpful to see your html / css for the actual box as well.

How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

shadow box not filling page

Depending on the browser support that you need (no Edge & IE), you could set a background color to a dark gray, and use background-blend-mode instead of using a giant box-shadow.

body {
  background-color: #444;
  background-image: url(..img/yourImage.jpg);
  background-blend-mode: multiply;
}

Just don't use black as the background-color or you won't see your image. Control how dark it is by changing the color.