將（偽）元素限製到其父元的邊框框

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

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

標記

我們的基本標記使用段落（<p> ）從數據陣列生成的元素（使用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>每個段落的樣式屬性都包含一個CSS變量（ <code>--slist ），其梯度顏色停止。

基本樣式

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

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

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

這為我們的進一步造型提供了視覺基礎。

分層背景

我們使用background-clip創建一個分層的背景，以將梯度應用程序控製到Content-Box，Padding-Box和Border-Box：

 p {
  / * ...以前的樣式... */
  顯示：Flex;
  準項目：中心；
  正當：中間的空間；
  盒子大小：邊框框；
  邊界：固體$ b透明；
  填充：$ P;
  背景： 
    線性級別（#DBDBDB，#FFF）content-box， 
    線性級別（var（-slist））填充盒， 
    線性級別（#FFF，#DCDCDC）border-box;
  文本式：1EM;
}

該技術確保梯度尊重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;
    內容：計數器（c，十進制領導零）;
    顯示：網格；
    位置盛口：中心；
    邊緣右： -  $ P;
    文字 -  0：0;
  }
}

這會創建圓形編號標記。

箭頭偽元素

使用:before創建角度箭頭：

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

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

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

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

以上是將（偽）元素限製到其父元的邊框框的詳細內容。更多資訊請關注PHP中文網其他相關文章！