Einschränkung eines (Pseudo) Element

Dieses Tutorial zeigt eine saubere Methode, um die Anzeige eines Pseudo-Elements innerhalb der Grenzbox seines Elternteils einzuschränken und komplexe Problemumgehungen zu vermeiden. Das Ziel ist ein visuell ansprechendes Ergebnis mit minimalem Aufschlag und effizienten CSS. Wir werden dies erreichen, ohne zusätzliche Elemente hinzuzufügen, mehrere Formen oder umfangreiche Listen in unserem CSS zu verwenden.

Die Herausforderung besteht darin, dass das Styling des Pseudoelements, insbesondere Gradienten und abgerundete Ecken, streng innerhalb der Grenzen des Elternteils bleibt. Lassen Sie uns die Lösung untersuchen.

Markup

Unser Basismarkup verwendet Absatz (<p> ) Elemente, die aus einem Datenarray erzeugt wurden (unter Verwendung von PUG für Kürze):</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;p style=&quot;--slist: #ebac79, #d65b56&quot;&gt; Pfannkuchen -Muffin -Schokoladensirup Brownie.&lt;/p&gt; &lt;p style=&quot;--slist: #90cbb7, #2fb1a9&quot;&gt;Kuchen -Zitronen -Beeren -Muffin -Pflaumen -Makkaron.&lt;/p&gt; &lt;p style=&quot;--slist: #8a7876, #32201c&quot;&gt;Wafer Apfelkuchen Muffin -Lebkuchen.&lt;/p&gt; &lt;p style=&quot;--slist: #a6c869, #37a65a&quot;&gt;Alkohol Pflaume Topping Chocolate Loney.&lt;/p&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Das Stilattribut jedes Absatzes enthält eine CSS -Variable ( <code>--slist ), die seine Gradientenfarbe hält.

Grundstyling

Erste Absatzstile Set Dimensions, Schriftart und Grenzradius:

 $ w: 26em;
$ H: 5EM;

P {
  Breite: $ W; Höhe: $ H;
  Grenzradius: .5*$ H;
  Hintergrund: Silber;
  Schriftart: 1,5EM/ 1.375 Trebuchet MS, Verdana, Sans-Serif;
}

Dies bietet eine visuelle Basis für unser weiteres Styling.

Überlagerte Hintergründe

Wir erstellen einen geschichteten Hintergrund mithilfe von background-clip um die Gradientenanwendung auf Content-Box, Padding-Box und Border-Box zu steuern:

 P {
  / * ... vorherige Stile ... */
  Anzeige: Flex;
  Ausrichtung: Zentrum;
  Rechtfertigungsbekämpfung: Weltraum zwischen;
  Kastengrößen: Border-Box;
  Grenze: solide $ b transparent;
  Polsterung: $ P;
  Hintergrund: 
    linear-Gradient (#DBDBDB, #FFF) Content-Box, 
    Lineargradient (var (-Slist)) Polsterkasten, 
    linear-Gradient (#FFF, #DCDCDC) Border-Box;
  textindent: 1em;
}

Diese Technik stellt sicher, dass Absolventen die von border-radius definierten abgerundeten Ecken respektieren.

Nummerierung

Die Absatznummerierung wird mit dem :after Pseudoelement hinzugefügt:

 $ D: $ H - 2*$ B;

P {
  / * ... vorherige Stile ... */
  Gegeninkrement: C;

  &:nach {
    Kastengrößen: Erbe;
    Grenze: Erbe;
    Breite: $ D; Höhe: $ D;
    Grenzradius: 50%;
    Box-Shadow: 
      Einschub 0 0 1px 1px #efef,, 
      Einschub 0 #{-$ B} RGBA ( #000, .1);
    Hintergrund: 
      Lineargradient (var (-Slist)) Polsterkasten, 
      linear-Gradient ( #D0D0D0, #e7e7e7) Border-Box;
    Farbe: #fff;
    Inhalt: Zähler (C, Dezimalführer-Null);
    Anzeige: Grid;
    Ort-in-intent: Zentrum;
    Margin -Right: -$ P;
    textindent: 0;
  }
}

Dies erzeugt kreisförmige nummerierte Marker.

Der Pfeil Pseudo-Element

Der abgewinkelte Pfeil wird mit dem :before Pseudoelement erstellt:

 P {
  / * ... vorherige Stile ... */
  Position: Relativ;

  &: vor {
    Position: absolut;
    Richtig: -$ B;
    Breite: $ H;
    Höhe: $ H;
    Grenzradius: $ B;
    Transformation: Drehen (45 Grad);
    Box-Shadow: 0 0 7px RGBA (#000, .2);
    Hintergrund: Linear-Gradient (-45de, transparente Calc (50%- #{. 5*$ H}), Orange 0, lila Berechnung (50% #{. 5*$ H}), transparent 0);
    Inhalt: '';
    Clip-Pfad: Einschub (0 Runde $ R);
  }
}

Entscheidend ist, clip-path: inset(0 round $r) stellt sicher, dass der Pfeil in der Grenzkiste des Elternteils und dessen border-radius bleibt. Die Stopppositionen des Gradienten werden sorgfältig berechnet, um an den oberen und unteren Kanten des Elternteils übereinzustimmen.

Dieser Ansatz liefert eine visuell ansprechende und effizient codierte Lösung für das Problem der Einschränkung eines Pseudoelements auf die Grenzbox seines Elternteils. Die Verwendung von clip-path: inset() bietet eine prägnante und wirksame Methode, um dies zu erreichen.

Das obige ist der detaillierte Inhalt vonEinschränkung eines (Pseudo) Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!