Peut CSS3 box-shadow:inset faire seulement un ou deux côtés? comme border-top?

Je m'interroge sur la prise en charge de côte interne spécifique d'ombres css3.

Je sais que cela fonctionne très bien sur les navigateurs pris en charge.

div { box-shadow:inset 0px 1px 5px black; }

Je suis juste curieux de savoir si il existe un moyen de parvenir à quelque chose comme: 

div { box-shadow-top:inset 0px 1px 5px black; }
InformationsquelleAutor ndmweb | 2011-05-06
  1. 143

    C'est ce qui a fonctionné pour moi:

    box-shadow: inset 1px 4px 9px -6px;

    Exemple: http://jsfiddle.net/23Egu/

    • Solution plus élégante à ce jour.
    • Génial! J'ai eu du mal avec cela, pour toujours, mais cette seule ligne apporte le plus sexy d'un côté de la frontière jamais. Merci, mec!
    • Désolé, j'ai accidentellement en bas-voté mais je ne voulais pas. 🙁
    • Intéressant de noter que vous pouvez passer qu'à box-shadow: inset 1px -4px 9px -6px; pour un fond d'ombre.
    • Côté gauche de l'ombre: box-shadow: inset 4px 1px 9px -6px; côté Droit de l'ombre: box-shadow: inset -4px 1px 9px -6px;
    • hmm donc, tout ce que nous faisons est que nous sommes à l'aide de grande valeur de l'écart et puis niant négative dans le flou. Intelligent

    InformationsquelleAutor nischtname
  2. 11

    Je ne pense pas que votre vraiment besoin box-shadow-top parce que si vous définissez offsetx à 0 et offsety pour toute valeur positive ne reste que l'ombre est sur le dessus.

    si vous voulez avoir de l'ombre sur le haut et de l'ombre dans le fond, vous ne pouvez tout simplement utiliser deux divs:

    <div style="box-shadow:inset 0 1px 5px black;">
  <div style="box-shadow:inset 0 -1px 5px black;">
    some content
  </div>
</div>

    si vous voulez vous débarrasser de l'ombre sur les côtés utilisation rgba au lieu de hex de la couleur et de définir plus offsety: 

    box-shadow:inset 0 5px 5px rgba(0,0,0,.5)

    de cette façon, vous donner de l'ombre plus opacité de sorte que les côtés de rester caché et avec plus de décalage de vous recevoir moins d'opacité

    exemple complet:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                background: #1C1C1C;
            }
            div {
                margin: 50px auto;
                width: 200px;
                height: 200px;
                background: #fff;
                -webkit-border-radius: 20px;
                -khtml-border-radiust: 20px;
                -moz-border-radius: 20px;
                -o-border-radius: 20px;
                border-radius: 20px;
                box-shadow:inset 0px 5px 5px rgba(0,0,0,.5); 
            }
            div > div {
                background:none;
                box-shadow:inset 0px -5px 5px rgba(0,0,0,.5); 
            }
        </style>
    </head>
    <body>
        <div><div></div></div>
    </body>
</html>
    • Et l'ombre sera plus diffusée que vous pourriez vouloir. Et les côtés ont changé. Son certainement un résultat différent de celui box-shadow-top pourrait donner. modifier Mais c'est la façon dont j'ai l'habitude de le faire aussi =)
    • si vous voulez vous débarrasser de l'ombre sur les côtés utilisation rgba au lieu de hex de la couleur et de définir plus offsety: box-shadow: 0 5px 5px rgba(0,0,0,.5) de cette façon, vous donner de l'ombre plus opacité de sorte que les côtés de rester caché et avec plus de décalage de vous recevoir moins d'opacité
    • Pour info, au lieu d'avoir deux div imbriqués est d'atteindre un haut et en bas des ombres dans le même temps, vous pouvez le faire avec une div en utilisant ceci: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black;
    InformationsquelleAutor seler
  3. 9

    à l'aide de :before et after éléments réguliers ombres coupe de par overflow:hidden sur le parent de la boîte, comme dans cet exemple: http://dabblet.com/gist/2585782

    CSS

    /**
 * Top and Bottom inset shadow
 */


#element{
  background-color: #E3F2F7;
  height: 55px;
  position: relative; /* to position pseudo absolute*/
  overflow: hidden; /* to cut of overflow shadow*/
  margin-top: 200px;    
}

#element:before , #element:after{
  content: "
    /**
* Top and Bottom inset shadow
*/
#element{
background-color: #E3F2F7;
height: 55px;
position: relative; /* to position pseudo absolute*/
overflow: hidden; /* to cut of overflow shadow*/
margin-top: 200px;    
}
#element:before , #element:after{
content: "\0020";
display: block;
position: absolute;
width: 100%;
height: 1px; /* when 0 no shadow is displayed*/
box-shadow: #696c5c 0 0 8px 0;
}
#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/
    20"    ;
  display: block;
  position: absolute;
  width: 100%;
  height: 1px; /* when 0 no shadow is displayed*/
  box-shadow: #696c5c 0 0 8px 0;
}

#element:before { top: -1px} /* because of height: 1*/
#element:after { bottom: -1px}  /* because of height: 1*/

    HTML

    <div id="element"></div>
    InformationsquelleAutor Jakob Cosoroaba
  4. 5

    Vous pouvez utiliser un dégradé d'arrière-plan pour un travail autour de dans la plupart des cas:

    SCSS(avec boussole) exemple:

    @include background(linear-gradient(top, #666 1%, #999 3%, #ddd 6%, #f6f6f6 9%, #f6f6f6 92%, #ddd 94%, #999 97%, #666 99%) );
    • Parfois, nous avons besoin de prendre du recul et de réfléchir à ce que nous essayons d'accomplir. Et c'est souvent ce que nous sommes par la suite, avec une face intérieure de la boîte de l'ombre. Brillant. J'avais upvote deux fois si je le pouvais!
    • Quand j'ai vu ce commentaire, j'ai pensé qu'il ressemblait façon de compliqué à travailler, mais cela a fonctionné parfaitement. Merci!!!!!
    InformationsquelleAutor Omar Jalalzada
  5. 4
    box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);
-o-box-shadow: inset 5px 0 5px -5px rgba(0,0,0,0.5),inset -5px 0 5px -5px rgba(0,0,0,0.5);

    Cela fonctionne très jolie 🙂

    Ici est un codepen en l'illustrant:
    http://codepen.io/poopsplat/pen/cGBLy

    InformationsquelleAutor poopsplat
  6. 3

    Pour la même ombre, mais uniquement sur le haut :

    box-shadow: inset 0px 6px 5px -5px black;

    D'avoir de l'ombre dans une direction que vous avez à nier le "flou" de paramètre avec la "propagation" des paramètres, puis réglez le "h-pos" et/ou "v-pos" paramètres par cette même valeur.
    Il ne fonctionne pas avec en face de la frontière ou de la triple frontière. Vous devez ajouter une définition.

    Plus d'exemples ici : http://codepen.io/GBMan/pen/rVXgqP

    InformationsquelleAutor GBMan
  7. 1

    Non, pas directement, mais vous pouvez rogner les pièces que vous ne voulez pas en mettre dans un div avec overflow: hidden:

    http://jsfiddle.net/Vehdg/

    InformationsquelleAutor Mark Kahn
  8. 1

    J'ai juste eu ce problème moi-même. La solution que j'ai trouvé était avec plusieurs box-ombre (une pour chaque côté que vous voulez que votre ombre). Voici la définition: 

    box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

    Ici est de savoir comment penser:

    • tout d'abord, faire de la propagation 0 (cela va désactiver l'effet sur tous les côtés)
    • le h de décalage (si vous définissez à être positif, il sera jeté sur le côté gauche, si vous le définissez négatif, sur le côté droit)
    • le v-offset (si vous définissez à être positif, il sera jeté sur le côté supérieur, si vous le mettre en négatif, sur le bas côté

    Ici vous pouvez voir mon cas avec box-shadow sur trois côtés (gauche, haut, droite et bas est avec la même couleur que l'arrière-plan pour créer l'effet que je voulais - sur le côté gauche et le droit d'aller tout le chemin vers le bas)
    https://codepen.io/cponofrei/pen/eMMyQX

    InformationsquelleAutor Cristi Onofrei
  9. 0

    Vous pouvez obtenir un seul côté, ombre interne par le réglage de votre div overflow:hidden et en ajoutant de l'ombre les éléments le long de la frontière.

    Définir une ombre interne sur le haut et le bas des frontières d'une division:

    HTML 

    <div id="innerShadow">
    <div id="innerShadowTop">
        Content...
    <div id="innerShadowBottom">
</div>

    CSS

    #innerShadow
{
position: relative;
overflow: hidden;
}
#innerShadowTop
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
top: -1px;
-moz-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.65);
}
#bannerShadowBottom
{
width: 100%;
height: 1px;
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
-moz-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
-o-box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
box-shadow: 0px -1px 6px 1px rgba(0, 0, 0, 0.65);
}
    • Plusieurs sont d'avis que l'ajout de balisage comme ce n'est pas de la sémantique et de est une mauvaise pratique. Cela pourrait être réalisé en utilisant inset et faire preuve de créativité en utilisant les valeurs de la box-shadow css. N'oubliez pas que vous pouvez empiler boîte-ombres sur le même élément. Donc, on pourrait utiliser quelque chose comme @Jakobud dit dans un commentaire ci-dessus: box-shadow:inset 0 1px 5px black, inset 0 -1px 5px black; une Autre manière, qui n'est que légèrement moins offensif que d'ajouter inutile de balisage, est d'utiliser :before et :after sélecteurs. Mais pourquoi le faire si vous pouvez le faire directement par la sélection et le style de l'élément d'origine.
    InformationsquelleAutor Jason George
  10. 0

    box-shadow est pour tous les quatre côtés. Vous ne pouvez pas changer cela (encore?). Le 4 tailles dans le box-shadow définition sont OffsetX, offsetY, Blur et Spread.

    • La propagation et le Flou ne sont pas les mêmes. Il y a des valeurs différentes pour chaque. Donc, techniquement, il y a 6. Inset/Outset, OffsetX, OffsetY, BlurRadius, SpreadRadius et Color. Comme d'autres l'ont souligné, vous pouvez spécifier un côté comme cette box-shadow: inset 0 8px 6px -6px black;
    • Vrai. J'ai changé la réponse à refléter tous les 4 dimensions.
    InformationsquelleAutor Rudie
  11. 0

    Plusieurs zone d'ombres a fait le tour pour moi.

    box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

    http://jsfiddle.net/kk66f/

    InformationsquelleAutor shaunw