Beispielcode zur Implementierung des Aushöhlungseffekts mit CSS

.mixinsTicket(@width, @height, @r, @left, @lcolor, @rcolor) {
    Breite: @width;
    Höhe: @Höhe;
    Hintergrund:
              radial-gradient(Kreis oben rechts, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 51% keine Wiederholung,
              radial-gradient(Kreis unten rechts, transparent @r, @lcolor 0) -(@width - @left) unten ~'/' 100% 51% keine Wiederholung,
              radial-gradient(Kreis oben links, transparent @r, @rcolor 0) @left 0 ~'/' 100% 51% keine Wiederholung,
              radial-gradient (Kreis unten links, transparent @r, @rcolor 0) @left bottom ~'/' 100% 51% keine Wiederholung;
} 

.mixinsTicket1(@width, @height, @r, @top, @color) {
   Breite: @width;
   Höhe: @Höhe;
   Hintergrund:
               radial-gradient(Kreis unten links, transparent @r, @color 0) links (@top - @height) ~'/' 51% 100% keine Wiederholung,
               radial-gradient(Kreis oben links, transparent @r, @color 0) links @top ~'/' 51% 100% keine Wiederholung,
               radial-gradient(Kreis unten rechts, transparent @r, @color 0) rechts (@top - @height) ~'/' 51% 100% keine Wiederholung,
               radialer Farbverlauf (Kreis oben rechts, transparent @r, @Farbe 0) rechts @top ~'/' 51 % 100 % keine Wiederholung;
   &::nach{
     Inhalt: '';
     Anzeige: Block;
     Position: absolut;
     Breite: berechnet (100 % – 2 * @r);
     links: @r;
     oben: @top;
     Rahmen oben: 1px gestrichelt #fff;
     transformieren: übersetzenY(.5);
   }
}

.mixinFlag(@width, @height, @bg) wann(Standard()) {
    Breite: @width;
    Höhe: @Höhe;
    Hintergrund:
              linearer Farbverlauf (45 Grad, transparente Quadratwurzel (pow(@width/2, 2)/2), @bg 0) rechts,
              linearer Farbverlauf (-45 Grad, transparente Quadratwurzel (pow(@width/2, 2)/2), @bg 0) links;
    Hintergrundgröße: 50 % 100 %;
    Hintergrundwiederholung: keine Wiederholung;
 }
 .mixinFlag(@width, @height, @bg) wenn(@width > @height) {
    Breite: @width;
    Höhe: @Höhe;
    Hintergrund:
              linearer Farbverlauf (-45 Grad, transparente Quadratwurzel (pow(@height/2, 2)/2), @bg 0) oben links,
              linearer Farbverlauf (-135 Grad, transparente Quadratwurzel (pow(@height/2, 2)/2), @bg 0) unten links;
    Hintergrundgröße: 100 % 50 %;
    Hintergrundwiederholung: keine Wiederholung;
} 

.mixinsMark(@width, @height, @bg) {
    Breite: @width;
    Höhe: @Höhe;
    Hintergrund:
              linearer Farbverlauf (-45 Grad, transparent sqrt (pow (@height/2, 2)/2), @bg 0) unten links,
              linearer Farbverlauf (-135 Grad, transparente Quadratwurzel (pow(@height/2, 2)/2), @bg 0) oben links;
    Hintergrundgröße: 100 % 50 %;
    Hintergrundwiederholung: keine Wiederholung;
}

css {
    Breite: 510px;
    Höhe: 128px;
    Hintergrund: #FFF;
    Hintergrundbild: linearer Farbverlauf (rgba (182, 128, 102, .8) 8px, transparent 0),
                      linearer Farbverlauf (90 Grad, RGBA (182, 128, 102, .8) 8px, transparent 0);
    Hintergrundgröße: 8px 14px, 14px 8px;
}

.Maske {
  Position: fest;
  oben: 0;
  links: 0;
  Z-Index: 100;
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrund:
  radialer Farbverlauf (nächste Seite bei 50 % 278 rpx, transparent 140 rpx, rgba (0, 0, 0, 0,12) 180 rpx, rgba (0, 0, 0, 0,22) 200 rpx, rgba (0,0,0, 0,3) 220 rpx, rgba (0,0,0, 0,4)) keine Wiederholung;
}