Est-il possible de n'avoir en quelque sorte qu'une ombre de boîte en médaillon d'un côté d'un div? Notez que je parle ici d'une boîte-ombre en médaillon , pas de la boîte-ombre extérieure normale.

Par exemple, dans le JSFiddle suivant, vous verrez que l'ombre incrustée apparaît sur les 4 côtés, à des degrés divers.

Comment puis-je l'afficher UNIQUEMENT en haut? Ou au plus UNIQUEMENT en haut et en bas?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

C'est ce que vous recherchez. Il a des exemples pour chaque côté que vous voulez avec une ombre.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Voir l'extrait pour plus d'exemples:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

L'astuce est un deuxième .box-innerintérieur, qui est plus large que l'original .box, et le box-shadowest appliqué à cela.

Ensuite, ajoutez plus de rembourrage pour .textcompenser la largeur ajoutée.

Voici à quoi ressemble la logique:

Et voici comment cela se fait en CSS:

Utilisez la largeur maximale pour .inner-boxne pas .boxélargir et overflowpour vous assurer que le reste est coupé:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% est plus large que le parent qui est 100% dans le contexte d'un enfant (devrait être le même lorsque le parent .boxa une largeur fixe, par exemple). Les marges négatives compensent la largeur et provoquent le centrage de l'élément (au lieu de masquer uniquement la partie droite):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Et ajoutez un peu de remplissage sur l'axe X pour compenser le plus large .inner-box:

.text {
    padding: 20px 40px;
}

Voici un violon qui fonctionne.

Si vous inspectez le violon, vous verrez:

Un peu tard, mais une réponse en double qui ne nécessite pas de modifier le remplissage ou d'ajouter des div supplémentaires peut être trouvée ici: Vous avez un problème avec le fond de l'encart box-shadow uniquement . Il dit: "Utilisez une valeur négative pour la quatrième longueur qui définit la distance de propagation. Ceci est souvent négligé, mais pris en charge par tous les principaux navigateurs"

Du violon du répondeur :

box-shadow: inset 0 -10px 10px -10px #000000;

Cela vient un peu près.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

essayez-le, peut-être utile ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

ci-dessus CSScar vous avez une ombre de boîte en bas.
vous pouvez en rouge plus ici

Ce n'est peut-être pas exactement ce que vous recherchez, mais vous pouvez créer un effet très similaire en utilisant rgbaen combinaison avec linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Cela crée un dégradé linéaire du noir avec une opacité de 50% ( rgba(0,0,0,.5)) à transparent ( rgba(0,0,0,0)) qui commence à être parfaitement transparent à 30% du haut. Vous pouvez jouer avec ces valeurs pour créer l'effet souhaité. Vous pouvez l'avoir d'un côté différent en ajoutant une valeur deg ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) ou en changeant les couleurs. Si vous voulez des ombres vraiment complexes comme des angles différents sur différents côtés, vous pouvez même commencer à superposer linear-gradient.

Voici un extrait de code pour le voir en action:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Inset Box Shadow uniquement sur la face supérieure?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }