Menyekat elemen (pseudo) ke kotak sempadan ibu bapa '

Tutorial ini menunjukkan kaedah yang bersih untuk mengurung paparan pseudo-elemen dalam kotak sempadan induknya, mengelakkan penyelesaian yang kompleks. Matlamatnya adalah hasil yang menarik secara visual menggunakan markup minimum dan CSS yang cekap. Kami akan mencapai ini tanpa menambah elemen tambahan, menggunakan pelbagai bentuk, atau senarai yang luas dalam CSS kami.

Cabarannya terletak pada memastikan gaya pseudo-elemen, terutamanya kecerunan dan sudut bulat, tetap ketat di dalam sempadan ibu bapa. Mari kita meneroka penyelesaiannya.

Markup

Markup asas kami menggunakan perenggan (<p> ) Unsur -unsur yang dihasilkan dari array data (menggunakan pug untuk keringkasan):</p> <pre class="brush:php;toolbar:false">&lt;p style=&quot;--slist: #ebac79, #d65b56&quot;&gt; Pancake Muffin Chocolate Syrup Brownie.&lt;/p&gt; &lt;p style=&quot;--slist: #90cbb7, #2fb1a9&quot;&gt;Cake Lemon Berry Muffin Plum Macaron.&lt;/p&gt; &lt;p style=&quot;--slist: #8a7876, #32201c&quot;&gt;Wafer Apple Tart Pie Muffin Gingerbread.&lt;/p&gt; &lt;p style=&quot;--slist: #a6c869, #37a65a&quot;&gt;Liquorice plum topping coklat lemon.&lt;/p&gt;</pre> <p> Setiap atribut gaya perenggan mengandungi pembolehubah CSS ( <code>--slist ) yang memegang warna kecerunannya berhenti.

Gaya asas

Gaya Perenggan Awal Dimensi, Font, dan Radius Sempadan:

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

p {
  lebar: $ w; Ketinggian: $ h;
  Border-Radius: .5*$ h;
  Latar Belakang: Perak;
  Font: 1.5em/ 1.375 Trebuchet MS, Verdana, Sans-Serif;
}

Ini menyediakan asas visual untuk gaya kami yang lebih lanjut.

Latar belakang berlapis

Kami membuat latar belakang berlapis menggunakan background-clip untuk mengawal aplikasi kecerunan ke kotak kandungan, kotak padding, dan kotak sempadan:

 p {
  / * ... gaya sebelumnya ... */
  Paparan: Flex;
  Align-item: pusat;
  Justify-Content: Space-antara;
  saiz kotak: kotak sempadan;
  Sempadan: pepejal $ b telus;
  Padding: $ p;
  Latar Belakang: 
    Linear-Gradient (#DBDBDB, #FFF) Kotak Kandungan, 
    linear-gradient (var (-slist)) padding-box, 
    Linear-Gradient (#FFF, #DCDCDC) BORDER-BOX;
  inden teks: 1EM;
}

Teknik ini memastikan kecerunan menghormati sudut bulat yang ditakrifkan oleh border-radius .

Penomboran

Penomboran perenggan ditambah menggunakan :after pseudo-elemen:

 $ d: $ h - 2*$ b;

p {
  / * ... gaya sebelumnya ... */
  Kaunter-Peningkatan: C;

  &: selepas {
    saiz kotak: mewarisi;
    Sempadan: mewarisi;
    lebar: $ d; ketinggian: $ d;
    Radius sempadan: 50%;
    kotak bayang-bayang: 
      inset 0 0 1px 1px #efefef, 
      inset 0 #{-$ b} rgba ( #000, .1);
    Latar Belakang: 
      linear-gradient (var (-slist)) padding-box, 
      Linear-Gradient ( #D0D0D0, #E7E7E7) BORDER-BOX;
    Warna: #FFF;
    Kandungan: Kaunter (C, perpuluhan-sifar-sifar);
    paparan: grid;
    Kandungan Tempat: Pusat;
    margin -kanan: -$ p;
    inden teks: 0;
  }
}

Ini mewujudkan penanda bernombor bulat.

Pseudo-elemen anak panah

Anak panah bersudut dibuat menggunakan :before pseudo-element:

 p {
  / * ... gaya sebelumnya ... */
  Kedudukan: Relatif;

  &: sebelum {
    Kedudukan: Mutlak;
    Kanan: -$ b;
    lebar: $ h;
    Ketinggian: $ h;
    Sempadan-radius: $ b;
    Transform: berputar (45deg);
    box-shadow: 0 0 7px rgba (#000, .2);
    Latar Belakang: Linear-Gradient (-45Deg, Calc telus (50%- #{. 5*$ H}), Orange 0, Purple Calc (50% #{. 5*$ H}), telus 0);
    Kandungan: '';
    Clip-Path: Inset (0 pusingan $ r);
  }
}

Secara kritikal, clip-path: inset(0 round $r) memastikan anak panah tetap berada di dalam kotak sempadan ibu bapa, menghormati border-radius . Kedudukan berhenti kecerunan dikira dengan teliti untuk diselaraskan dengan tepi atas dan bawah ibu bapa.

Pendekatan ini memberikan penyelesaian yang menarik dan cekap secara visual kepada masalah menyekat elemen pseudo ke kotak sempadan induknya. Penggunaan clip-path: inset() menyediakan kaedah ringkas dan berkesan untuk mencapai ini.

Atas ialah kandungan terperinci Menyekat elemen (pseudo) ke kotak sempadan ibu bapa '. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!