該教程展示了一種干淨(jìng)的方法，可以將偽元素顯示在其父母的邊框盒中，避免使用複雜的解決方法。目標(biāo)是使用最小的標(biāo)記和有效的CSS一個(gè)視覺吸引力的結(jié)果。我們將在我們的CSS中使用多種形狀或大量列表而無需添加額外的元素來實(shí)現(xiàn)這一目標(biāo)。

挑戰(zhàn)在於確保偽元素的樣式，尤其是梯度和圓角，嚴(yán)格保留在父母的邊界內(nèi)。讓我們探索解決方案。

標(biāo)記

我們的基本標(biāo)記使用段落（<p> ）從數(shù)據(jù)陣列生成的元素（使用pug為簡潔）：</p> <pre class="brush:php;toolbar:false">&lt;p style=&quot;--slist: #ebac79, #d65b56&quot;&gt;煎餅鬆餅巧克力糖漿布朗尼。&lt;/p&gt; &lt;p style=&quot;--slist: #90cbb7, #2fb1a9&quot;&gt;蛋糕檸檬漿果鬆餅梅卡龍。&lt;/p&gt; &lt;p style=&quot;--slist: #8a7876, #32201c&quot;&gt;晶圓蘋果蛋餅鬆餅薑餅。&lt;/p&gt; &lt;p style=&quot;--slist: #a6c869, #37a65a&quot;&gt;甘草李子頂巧克力檸檬。&lt;/p&gt;</pre> <p>每個(gè)段落的樣式屬性都包含一個(gè)CSS變量（ <code>--slist ），其梯度顏色停止。

基本樣式

最初的段落樣式設(shè)置了尺寸，字體和邊界 - 拉迪烏斯：

 $ W：26EM;
$ h：5em;

p {
  寬度：$ W;身高：$ h;
  邊界 - 拉迪烏斯：.5*$ h;
  背景：銀；
  字體：1.5EM/ 1.375 Trebuchet MS，Verdana，Sans-Serif;
}

這為我們的進(jìn)一步造型提供了視覺基礎(chǔ)。

分層背景

我們使用background-clip創(chuàng)建一個(gè)分層的背景，以將梯度應(yīng)用程序控製到Content-Box，Padding-Box和Border-Box：

 p {
  / * ...以前的樣式... */
  顯示：Flex;
  準(zhǔn)項(xiàng)目：中心；
  正當(dāng)：中間的空間；
  盒子大?。哼吙蚩?；
  邊界：固體$ b透明；
  填充：$ P;
  背景： 
    線性級別（#DBDBDB，#FFF）content-box， 
    線性級別（var（-slist））填充盒， 
    線性級別（#FFF，#DCDCDC）border-box;
  文本式：1EM;
}

該技術(shù)確保梯度尊重border-radius定義的圓角。

編號

使用:after偽元素元素添加段落編號：

 $ d：$ h -2*$ b;

p {
  / * ...以前的樣式... */
  反插入：C；

  ＆：後 {
    盒子大?。豪^承；
    邊界：繼承；
    寬度：$ d;身高：$ d;
    邊界拉迪烏斯：50％；
    盒子陰影： 
      插圖0 0 1px 1px #efefef， 
      插圖0＃{ -  $ b} rgba（＃000，.1）;
    背景： 
      線性級別（var（-slist））填充盒， 
      線性級別（＃D0D0D0，＃E7E7E7）邊框框;
    顏色：#fff;
    內(nèi)容：計(jì)數(shù)器（c，十進(jìn)制領(lǐng)導(dǎo)零）;
    顯示：網(wǎng)格；
    位置盛口：中心；
    邊緣右： -  $ P;
    文字 -  0：0;
  }
}

這會創(chuàng)建圓形編號標(biāo)記。

箭頭偽元素

使用:before創(chuàng)建角度箭頭：

 p {
  / * ...以前的樣式... */
  位置：相對；

  ＆：前 {
    位置：絕對；
    右： -  $ b;
    寬度：$ h;
    身高：$ h;
    邊界拉迪烏斯：$ b;
    變換：旋轉(zhuǎn)（45維格）;
    盒子陰影：0 0 7px RGBA（＃000，.2）;
    背景：線性畢業(yè)生（-45DEG，透明計(jì)算（50％ - ＃{。5*$ h}），橙色0，紫色計(jì)算（50％＃{。5*$ h}），透明0）;
    內(nèi)容： '';
    剪輯路徑：插圖（0回合$ r）;
  }
}

至關(guān)重要的是， clip-path: inset(0 round $r)確保箭頭留在父母的邊界盒中，尊重其border-radius 。仔細(xì)計(jì)算梯度的停止位置，以與父母的頂部和底部邊緣保持一致。

這種方法為將偽元素限制在其父母的邊界盒中的問題上提供了具有視覺吸引力且有效編碼的解決方案。 clip-path: inset()為實(shí)現(xiàn)這一目標(biāo)提供了一種簡潔有效的方法。

以上是將（偽）元素限製到其父元的邊框框的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！