Verwenden des radialen Farbverlaufs in CSS zum Erzielen eines Karteneffekts

.ordinary-mixins-ticket-horizontal(@Breite,@Höhe,@r,@oben, @Farbe) {
  Position: relativ;
  Box-Größe: Rahmenbox;
  Polsterung: 0 @r;
  Breite: @width;
  Höhe: @Höhe;
  Hintergrundclip: Inhaltsbox;
  Hintergrundfarbe: @color;

  &::vor {
    Position: absolut;
    oben: 0;
    links: 0;
    Inhalt: "";
    Anzeige: Block;
    Breite: @r + 1px;
    Höhe: 100%;
    Hintergrund: radialer Farbverlauf (@r Kreis links oben, transparent @r, @Farbe @r + 1px);
  }

  &::nach {
    Position: absolut;
    oben: 0;
    rechts: 0;
    Inhalt: "";
    Anzeige: Block;
    //Das @r + 1px dient hier dazu, Lücken beim Vergrößern oder Verkleinern einer bestimmten Seitenbreite zu vermeiden: @r + 1px;
    Höhe: 100%;
    //Das @r + 1px dient hier dazu, Aliasing im Hintergrund zu verhindern: radial-gradient(@r Kreis rechts oben @r, transparent @r, @color @r + 1px);
  }
}

.übergeordnet {
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

importiere React von „react“;
importiere './App.css';
importiere „./ticket.less“;

Funktion App() {
    zurückkehren (
        <div Klassenname="App" Stil={
            {
                Anzeige: "flex",
                justifyContent: "zentriert",
                alignItems: "zentriert",
                Höhe: 600
            }
        }>
            <div Klassenname={'übergeordnet'}>
                <div Klassenname = "Kind">666</div>
            </div>
        </div>
    );
}

Standard-App exportieren;

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // @r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51 % dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) @left - 1px oben ~'/' 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) @left - 1px unten ~'/' 100% 51% keine Wiederholung,
    radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px ) -(@Breite - @links) oben ~'/' 100% 51% keine Wiederholung,
    radialer Farbverlauf (Kreis unten rechts, transparent @r, @r-Farbe @r + 1px) - (@Breite - @links) unten ~'/' 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left + 1px dient dazu, Lücken beim Vergrößern zu vermeiden// @r + 1px dient dazu, gezackte Kanten zu vermeiden// 51% dient dazu, einen kleinen leeren Bereich in der Mitte eines Elementhintergrunds zu vermeiden: radial-gradient(Kreis oben links, transparent @r, @r-Farbe @r + 1px) rechts oben ~'/' (@width - @left) 51% no-repeat,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) rechts unten ~'/' (@width - @left) 51% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) oben links ~'/' @left + 1px 51% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @l-Farbe @r + 1px) links unten ~'/' @left + 1px 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

@mixin mixins-ticket-vertical($Breite, $Höhe, $r, $links, $l-Farbe, $r-Farbe) {
  Breite: $Breite;
  Höhe: $höhe;
  // $left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // $r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51% dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent $r, $l-Farbe $r + 1px) $left - 1px oben / 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent $r, $l-Farbe $r + 1px) $left - 1px unten / 100% 51% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent $r, $r-Farbe $r + 1px ) -($Breite - $links) oben / 100% 51% keine Wiederholung,
  radialer Farbverlauf (Kreis unten rechts, transparent $r, $r-Farbe $r + 1px) – ($Breite – $links) unten / 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
}

.Kind {
  Zeilenhöhe: 200px;
}

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) links oben - 1px ~'/' 51 % 100 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) links -(@Höhe - @oben) ~'/' 51% 100% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts oben - 1px ~'/' 51% 100% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @r-Farbe @r + 1px) rechts - (@Höhe - @oben) ~'/' 51 % 100 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @r-Farbe @r + 1px) links unten ~'/' 51% (@Höhe - @oben) keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) oben links ~'/' 51% @top + 1px keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts unten ~'/' 51% (@Höhe - @oben) keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @l-Farbe @r + 1px) rechts oben ~'/' 51 % @top + 1px keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) links oben - 1px ~'/' 51 % 100 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) links -(@Höhe - @oben) ~'/' 51% 100% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts oben - 1px ~'/' 51% 100% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @r-Farbe @r + 1px) rechts - (@Höhe - @oben) ~'/' 51 % 100 % keine Wiederholung;
  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));

  &::nach {
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: @top;
    Rand: automatisch;
    Inhalt: '';
    Breite: berechnet (~ „100 %“ – 2 * @r – @Randversatz);
    Rahmen oben: 1px gestrichelt @Rahmenfarbe;
  }
}

.übergeordnet {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // @r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51 % dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) @left - 1px oben ~'/' 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) @links - 1px unten ~'/' 100% 51% keine Wiederholung,
    radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px ) -(@Breite - @links) oben ~'/' 100% 51% keine Wiederholung,
    radialer Farbverlauf (Kreis unten rechts, transparent @r, @r-Farbe @r + 1px) - (@Breite - @links) unten ~'/' 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));

  &::nach {
    Inhalt: '';
    Position: absolut;
    oben: 0;
    rechts: -@sm-r;
    Breite: @sm-r;
    Höhe: 100%;
    Hintergrundbild: radialer Farbverlauf (Kreis bei @sm-r, transparent @sm-r, @r-Farbe @sm-r + 1px);
    //Hintergrundgröße: @sm-r;
    Hintergrundgröße: @sm-r @sm-offset;
  }
}

.übergeordnet {
  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);
}

.Kind {
  Zeilenhöhe: 200px;
}

// Ticket.weniger

//Hintergrund: radialer Farbverlauf (Kreis oben rechts, transparent @r, @lcolor 0) - (@width - @left) oben ~'/' 100 % 55 % keine Wiederholung;
// Zerlegen Sie die obige Codezeile in Folgendes:
//Hintergrundbild: radial-gradient(Kreis oben rechts, transparent @r, @lcolor 0);
//Hintergrundposition: -(@width - @left) oben;
//Hintergrundgröße: 100 % 55 %;
//Hintergrundwiederholung: keine Wiederholung;

/*Hinweis: Hier gibt es zuerst einen transparenten Bereich von 50 Pixeln, und dann wird der zweite Bereich auf 0 gesetzt, was als Zurücksetzen des Stilbereichs von hier aus verstanden werden kann*/
/*Hintergrund: radial-gradient(Kreis oben rechts, transparent 50px, rot 0, #66a8ff 50%);*/

/*Wenn in Chrome die Farbe zwischen zwei Bereichen direkt mit einer Abweichung von 0 übergeht, kommt es zu starkem Aliasing*/
/*Hintergrund: radialer Farbverlauf (10px links, transparent 50 %, #F6327C 50 %);*/
/*Hintergrund: radialer Farbverlauf (10px links, transparent 50 %, #F6327C 55 %);*/

/*Schatteneffekt hinzufügen*/
/*Filter: Schlagschatten(2px 2px 2px rgba(0,0,0,.2));*/

/*Mehrere radiale Farbverläufe akkumuliert*/
/*Hintergrund: 
radialer Farbverlauf (50px 100px Ellipse, transparent 40px, gelb 41px, rot 49px, transparent 50px),
radial-gradient(30px Kreis, rot, rot 29px, transparent 30px);*/