it-swarm.com.de

Doppelrand mit anderer Farbe

Mit Photoshop kann ich zwei unterschiedliche Rahmen an ein Element mit zwei verschiedenen Farben setzen. Und damit kann ich mit meinen Elementen viele dynamische Schatteneffekte erzeugen. Selbst mit Photoshop-Effekten kann ich das mit Drop Shadow und Inner Shadow schaffen.

Was das Webdesign angeht, wie kann ich das mit CSS erreichen? Ist das wirklich möglich?
border with different color

HINWEIS: Ich gebe dem weißen Element zwei Ränder: Der äußere Rand ist weiß und der innere Rand ist grau. Zusammen erzeugen sie ein dynamisches Aussehen, so dass es sich wie ein Inset-Element anfühlt und das weiße Element mit Kissen geprägt ist. So ist die Sache ein bisschen:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

Aber Sie wissen, es ist eine doppelte Deklaration und ist ungültig. Wie kann ich so etwas in CSS verwalten?

Und wenn ich border-style: double setze, weißt du, dass ich nicht zwei verschiedene Farben für die einzige Variable double übergeben kann.

div.white{
       border: double white grey;
}

Darüber hinaus bin ich mit LESS CSS Preprozessor vertraut. Wenn dies mit dem CSS-Präprozessor möglich ist, lassen Sie es mich wissen.

37
Mayeenul Islam

Alternativ können Sie Pseudo-Elemente verwenden, um dies zu tun :) Der Vorteil der Pseudo-Element-Lösung besteht darin, dass Sie die innere Umrandung in beliebiger Entfernung von der eigentlichen Umrandung platzieren können . Das Markup:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}
<div class="double-border">
  <!-- Content -->
</div>

Wenn Sie Ränder wünschen, die aufeinander folgen (kein Leerzeichen dazwischen), können Sie dazu mehrere box-shadow-Deklarationen (durch Kommas getrennt) verwenden:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  box-shadow:
    inset 0 0 0 4px #eee,
    inset 0 0 0 8px #ddd,
    inset 0 0 0 12px #ccc,
    inset 0 0 0 16px #bbb,
    inset 0 0 0 20px #aaa,
    inset 0 0 0 20px #999,
    inset 0 0 0 20px #888;
  /* And so on and so forth, if you want border-ception */
  margin: 0 auto;
  padding: 3em;
  width: 16em;
  height: 16em;
  position: relative;
}
<div class="double-border">
  <!-- Content -->
</div>

68
Terry

Ich benutze Gliederung eine CSS-2-Eigenschaft, die einfach funktioniert. Überprüfen Sie dies, ist einfach und sogar leicht zu animieren:

.double-border {
  display: block;
  clear: both;
  background: red;
  border: 5px solid yellow;
  outline: 5px solid blue;
  transition: 0.7s all ease-in;
  height: 50px;
  width: 50px;
}
.double-border:hover {
  background: yellow;
  outline-color: red;
  border-color: blue;
}
<div class="double-border"></div>

Die Verwendung von Pseudoelement, wie von Terry vorgeschlagen, hat einen PRO und einen CON:

  1. PRO - große Cross-Browser-Kompatibilität, da Pseudo-Element auch von älteren IE unterstützt wird.
  2. CON - es ist erforderlich, ein zusätzliches (auch wenn generiertes) Element zu erstellen, wobei infact als Pseudo-Element definiert wird.

Auf jeden Fall ist eine großartige Lösung.


ANDERE LÖSUNGEN:

Wenn Sie Kompatibilität akzeptieren können, da IE9 ( IE8 unterstützt dies ) nicht unterstützt wird, können Sie das gewünschte Ergebnis auf zwei anderen Arten erreichen:

  1. mit der outline-Eigenschaft in Kombination mit border und einem einzelnen Einschubbox-shadow
  2. mit zwei box-shadow kombiniert mit border.

Hier ein jsFiddle mit Terry modifiziertem Code, der diese anderen möglichen Lösungen nebeneinander zeigt. Die wichtigsten spezifischen Eigenschaften für jeden sind die folgenden (andere werden in der Klasse .double-border gemeinsam genutzt):

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

LESS Code:

Sie haben nach möglichen Vorteilen für die Verwendung eines Vorprozessors wie LESS gefragt. In diesem speziellen Fall ist der Nutzen nicht so toll, aber Sie könnten trotzdem etwas optimieren, indem Sie mit @variable Farben und Rahmen/ouline/shadow definieren.

Hier ein Beispiel für meinen CSS-Code, der in LESS deklariert ist (das Ändern der Farben und der Randbreite wird sehr schnell):

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}
5
Luca Detomi

Verwenden Sie möglicherweise die Gliederungseigenschaft

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

3
Ivan

sie können mit css3 unendliche Ränder mit box-shadow hinzufügen. Angenommen, Sie möchten mehrere Ränder auf ein div anwenden.

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);

    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */

    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}
2

Sie können Kontur mit Konturversatz verwenden 

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
1
sameeuor

Versuchen Sie die Struktur unten, um den zweifarbigen Rand anzuwenden.

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}
0
Kishori

Sie können die Eigenschaften border und box-shadow zusammen mit CSS-Pseudoelementen verwenden, um eine Art Effekt mit dreifachem Rand zu erzielen. Sehen Sie sich das Beispiel unten an, um zu erfahren, wie Sie drei Ränder am unteren Rand eines div erstellen:

.triple-border:after {
    content: " ";
    display: block;
    width: 100%;
    background: #FFE962;
    height: 9px;
    padding-bottom: 8px;
    border-bottom: 9px solid #A3C662;
    box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>

Sie müssen mit den Werten herumspielen, um die Ausrichtung zu korrigieren. Sie können jedoch auch mehr Flexibilität erreichen, z. 4 Ränder, wenn Sie einige der Attribute in das richtige Element und nicht in den Pseudo-Selektor einfügen.

0
Muhan Alim