Ein pixel Schatten auf drei Seiten mit CSS3 box-shadow

Brauche ich zum erstellen einer one-pixel-Schatten auf drei Seiten von einem element mit box-shadow. Ich bin mit dem folgenden code, außer es ist die Schaffung eines zwei-pixel-Grenze, aber ich brauche nur eine.

   -moz-box-shadow: 0 1px 1px   #c00
-webkit-box-shadow: 0 0   1px 0 #c00
        box-shadow: 0 0   1px 0 #c00
  • Irgendeinem Grund Sie nicht mit border: 1px solid #c00?
  • Ja, denn die Grenze erweitern wird, die Kanten der box-Modell der Elemente, die Probleme verursachen wird. Sorry, sollte nur gesagt, Schatten statt der Grenze. 😉
  • "Grenze erweitern wird, die Kanten der box-Modell der Elemente, die Probleme verursachen wird" — okay, zwei Möglichkeiten gibt es. 1. Eine negative Marge von Seiten der Grenze umkehren der box-Modell-Effekt. 2. box-sizing: border-box;, das funktioniert im IE 8 und den letzten anderen Browsern.
InformationsquelleAutor Cofey | 2011-03-18
  1. 17

    Versuchen Sie 3 Schatten, keine Unschärfe. http://jsfiddle.net/leaverou/8tgAp/1/

    body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

    -moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    -webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
    box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}
    • Ich hatte keine Ahnung, konnte Sie mehrere box-shadows. Tolle Sachen. Es ist die Antwort, mit der rechten gibt.
    • Sie brauchen noch nicht einmal 3 box-Schatten, 2 genügen jsfiddle.net/Razvan/VxzvQ
    • Dies lässt ein pixel nach oben keine Grenze, siehe: jsfiddle.net/leaverou/VxzvQ/2 Dies kann oder kann nicht akzeptabel sein, je nach Anwendungsfall.
    • Und wie sieht Ihre version dieses problem beheben? Ich kann sehen, dass dies geschieht, auf Ihre version als auch.
    • danke für diesen Tipp
    InformationsquelleAutor Lea Verou
  2. 1

    Über die normale Grenze-Erklärung ist der Weg zu gehen, aber wenn—aus welchem Grund auch immer—Sie sind nicht in der Lage zu verwenden, border, dann können Sie ausblenden einer Seite der shadow mit dem :before-oder :after-pseudo-Selektor.

    Beispiel:

    body {background-color: #000; color: #fff}

.module {
    height: 100px;
    width: 100px;
    background-color: #000;
    -moz-box-shadow: 0 0 2px #f00;
    -webkit-box-shadow: 0 0 2px #f00;
    box-shadow: 0 0 2px #f00;
}

.module:before {
  content: '';
  border-top: solid #000 1px;
  display: block;
  position: relative;
  top: -1px;
}

    Sehen Sie es in Aktion hier: http://jsfiddle.net/3nspR/

    InformationsquelleAutor methodofaction
Schreibe einen Kommentar