How to Use Two CSS3 Box Shadows on One Element

.cell {  width: 100px;  height: 100px;  display: inline-block;  border: solid 1px;   position: relative;}
.cell:hover {    box-shadow: inset 0 0 5px rgba(200, 50, 50, 1);}.cell.selected:after {  content: "";  position: absolute;  top: 0px;  right: 0;  bottom: 0;  left: 0;    box-shadow: 0 0 5px rgba(50, 50, 200, 1);}

<div class="cell"></div><div class="cell selected"></div>

How do I add multiple box-shadows to an element, but only apply a transition to one of them?

For this you'd have to explicitly list out all the box-shadows, including the un-changed shadows, and animate all of them (despite the lack of change in some/most of them). An animation that changes nothing will, at least, look unanimated. Regardless of the behind-the-scenes transition.

Demonstrative CSS:

div {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 3px #FF0000;
    transition: box-shadow 1s linear;
}

div:hover {
    box-shadow: inset 1px 1px 3px #000000, 1px 1px 10px #FF0000;
    transition: box-shadow 1s linear;
}

(simple) JS Fiddle demo.

Unfortunately there is, as yet (nor is there planned to be, so far as I'm aware), no method to name or identify individual box-shadows.

box shadows on multiple elements at same level but without overlap?

If you can use filter and drop-shadow then you can apply a drop-shadow to the container. This shadow differs as it conforms to the alpha channel of the image (in this case, the outline of the content) instead of a simple rectangle:

body {  background: darkgrey;  padding-top: 50px}
#box-one,#box-two {  background: white;  width: 200px;  height: 200px;  margin: auto;  position: relative;}
#box-one {  left: -50px;  z-index: 1;}
#box-two {  right: -50px;  z-index: 1;}
#top {  filter: drop-shadow(0 0 20px black);}

<div id="top">  <div id="box-one"></div>  <div id="box-two"></div></div>

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

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

#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 */
}