2013-07-12 5 views
13

Ich versuche Kontrollieren Sie die zwei Farben einer eingefügten Grenze?

Wie Sie

in CSS, um zu sehen, ob eine Art und Weise gibt es die beiden Farben des Einsatzes Grenze zu ändern wissen, schafft der Einsatz Stil eine Grenze auf ein Element, das die Illusion erzeugt, dass es sich um ein eingebettetes Rand. Dies wird erreicht, indem Sie den unteren und rechten Rand an die ausgewählte Farbe anpassen und die Farbe des oberen und linken Rands in einem etwas dunkleren Farbton ändern.

Kennt jemand einen Weg, wo Sie kontrollieren können, wie dunkel oder vielleicht sogar andere Farbe der alternative Farbton wäre?

#myElement{ 
    border: inset 1px white; 
} 

Danke.

+1

Diese Frage ist so dumm, ich habe gerade festgestellt, ein Fix dies zu lesen. Ich überlasse das jedoch, für den Fall, dass jemand anderes versucht, dies zu erreichen. –

+1

Sie müssen nur Ihre Grenzen manuell erstellen. 'border-left: 1px solid #somecolour;' und dasselbe für rechts, oben und unten. Wenn Sie sich nicht sicher sind, wie Sie den Inset-Effekt reproduzieren können, erstellen Sie einen Screenshot eines Rahmens, der auf Inset gesetzt ist, und verwenden Sie dieselben Farben. Dann beweg dich von dort. – Ariane

+0

Ja, du hast Recht. Als ich meine Frage zurück las, kam es zu mir, ich beantwortete meine eigene Frage. Hatte ein Hirn furzen. –

Antwort

13

Ich glaube nicht, dass Sie es die Art und Weise steuern kann ich erwähnt, aber für sicher, dass Sie die individuelle Farbe jeder Grenze steuern:

#myElement{ 
    border-style: solid; 
    border-width: 1px; 
    border-top-color: black; 
    border-left-color: black; 
    border-right-color: white; 
    border-bottom-color: white; 
} 
+4

In der Tat. +1, dass du dir die Zeit genommen hast, dich selbst zu beantworten, weil wir alle unsere Dummheitsepisoden haben und wir nicht immer in der Lage sind, die offensichtliche Lösung selbst zu finden. – Ariane

1

Wenn Sie die gleiche Farbe für alle Seiten verwenden möchten von die eingefügte Grenze, probiere das aus, was ich benutzt habe und gut gearbeitet habe.

border-style: solid inset solid solid; 
Verwandte Themen