Why does a background break a box-shadow inset effect?

I'm a little confused what you're actually after. If it's not quite right, let me know :)

This is my best guess.

Live Demo

CSS:
(I added in the vendor prefix rules.)

#box {
    -moz-border-radius: 5px;
    border-radius: 5px; 

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

    width: 280px;
    height: 280px;
    padding: 10px
}

#wrapper {
    background-color: #0ef83f;

    -moz-border-radius: 5px;
    border-radius: 5px; 

    -webkit-box-shadow: inset 0px 0px 18px #000;
    -moz-box-shadow: inset 0px 0px 18px #000;
    box-shadow: inset 0px 0px 18px #000;

    width: 240px;
    height: 240px;
    padding: 20px
}

HTML:

<div id="box">
    <div id="wrapper">
        Content here
    </div>
</div>

Since I am having this problem too and I too don't see this behaviour being normal, I filed a bug report over at mozilla

I can reproduce the problem in Google Chrome too, though, so I wonder whether this is really a bug. But it could be.

edit:

Indeed it's not a bug, but just the way it's meant to work. So, on the basis of this information, I forked your jfiddle example and came up with this solution:

The markup now looks like this:

<div id="box">
    <div id="wrapper">
        <div id="box_content">
            Content here
        </div>
        <div id="mask"></div>
    </div>
</div>

The mask becomes another div, which is layered on top of the #box_content one by means of being absolutely positioned. This is the CSS:

#wrapper{
    position: relative;
    display: inline-block;
    width: 280px;
    height: 280px;
    border-radius: 5px;
    margin: 10px;
}
#mask {
    position: absolute;
    top: 0px; left: 0px;
    width: 100%;
    height: 100%;

    pointer-events: none; /* to make clicks pass through */

    box-shadow: 0 0 10px #000000 inset;
}
#box_content{
    background-color: #0ef83f;
    height: 100%;
}