4 Verlauf der Grenzen im CSS

Ich brauche Hilfe die Anwendung eines gradient Grenze auf allen 4 Seiten des Kastens. Ich habe es versucht, aber es funktioniert nur für zwei Seiten. Nach einem Blick auf all die links und SO Antworten ich habe dieses:

CSS:

.test{
  height:250px;
  border: 2px solid;
  border-image: linear-gradient(to left,rgba(78,137,176,1)  1%, rgba(115,192,85,1)  100%) 100% 0 100% 0/2px 0 2px 0;
  padding-top:50px;
}

HTML:

<div class="test">
  This is a box and I want borders for all the sides
</div>

Ich würde jede Hilfe zu schätzen wissen. Ich bin versucht, etwas ähnliches wie auf dem Bild unten.
Danke.

4 Verlauf der Grenzen im CSS

  • Ich sah dies vor kurzem: "Codepen.io
  • der link, den Sie angebracht haben, funktioniert nicht richtig. ich habe es vor dem posten der Frage
  • der link, der u befestigt ist, hilfreich. ich komme bald wieder, wenn es funktioniert. bedanken Sie sich bei u
InformationsquelleAutor rahul patel | 2017-02-20
  1. 12

    Mit hintergrund-Bild: (produziert die genaue Leistung wie dein Bild)

    Scheinen Sie zu sein mit Gefälle, sind verschiedenen auf die einzelnen Seiten und so ist es schwierig, dies zu erreichen mit der border-image Eigenschaft. Sie könnten versuchen, und imitieren das Verhalten mit background-image wie in der unten snippet.

    Im Grunde, was die unten snippet stimmt ist, dass es schafft die Steigung für jede der 4 Seiten als gradient hintergrund-Bild und Streifen verwendet dann background-position um Sie auf den richtigen Speicherort.

    Den transparenten Rand auf die Eltern ist ein Platzhalter, wo die mimiced Grenze enden würde erscheinen. Die background-origin: border-box macht den hintergrund des Elements start von border-box Bereich selbst (und nicht padding-box oder content-box). Diese beiden sind nur zusätzliche Schritte, um vermeiden Sie die Verwendung von unnötigen calc Sachen in der background-position.

    CSS:

    .test {
  height: 250px;
  border: 2px solid transparent;
  background-image: linear-gradient(to right, rgb(187, 210, 224), rgb(203, 231, 190)), linear-gradient(to bottom, rgb(114, 191, 87), rgb(116, 191, 86)), linear-gradient(to left, rgb(204, 233, 187), rgb(187, 210, 224)), linear-gradient(to top, rgb(84, 144, 184), rgb(80, 138, 176));
  background-origin: border-box;
  background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
  background-position: top left, top right, bottom right, bottom left;
  background-repeat: no-repeat;
  padding-top: 50px;
}

    HTML:

    <div class="test">
  This is a box and i want border for all the side
</div>

    Mit border-image: (erzeugt einen Rand auf allen 4 Seiten, aber nicht dieselbe Leistung wie dein Bild)

    Die beste Leistung, die Sie bekommen konnte, mit border-image Eigenschaft wäre die unter, aber wie Sie sehen können von der demo-es ist nicht genau das gleiche wie das Bild (oder das erste snippet-Ausgabe):

    CSS:

    .test {
  height: 250px;
  border: 2px solid;
  border-image: linear-gradient(to left, rgba(78, 137, 176, 1) 1%, rgba(115, 192, 85, 1) 100%);
  border-image-slice: 1;
  padding-top:50px;
}

    HTML:

    <div class="test">
  This is a box and i want border for all the side
</div>

    • Vielen Dank. Dies funktioniert perfekt. Kann u mir sagen, der Unterschied b/w border-image und background-image. Was ist eigentlich besser?
    • Es ist eigentlich nicht viel Unterschied hier. border-image ist die empfohlene Eigenschaft für die Erstellung Grenze Gradienten, aber es produziert nicht die Ausgabe, die Sie benötigen, also müssen wir die Alternative Methode nur. Mit background-image ist nicht falsch (ich weiß, Semantik klug es ist, aber das ist eine andere Sache). Nur die Sache ist, dass, wenn das element tatsächlich hat ein Gefälle/Bild hintergrund auch dann müssen wir besonders vorsichtig sein, in der Sie ihn platzieren. Aber das kann man mit den gleichen Eigenschaften (background-origin, background-position) + ein extra background-clip. Es ist nicht unmöglich 🙂
    InformationsquelleAutor Harry
Schreibe einen Kommentar