（擬似）要素を親の境界箱に制限します

このチュートリアルは、親のボーダーボックス内に擬似要素のディスプレイを閉じ込めて、複雑な回避策を避けるためのクリーンな方法を示しています。目標は、最小限のマークアップと効率的なCSSを使用した視覚的に魅力的な結果です。これは、CSSに複数の形状または広範なリストを使用して、追加の要素を追加せずに実現します。

課題は、擬似要素のスタイリング、特に勾配と丸い角が厳密に親の境界内にとどまることを保証することにあります。解決策を探りましょう。

マークアップ

私たちのベースマークアップは段落を使用しています（<p> ）データアレイから生成された要素（Brevityのために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;
  Border-Radius：.5*$ h;
  背景：シルバー;
  フォント：1.5EM/ 1.375 Trebuchet MS、Verdana、Sans-Serif;
}

これにより、さらにスタイリングの視覚的なベースが提供されます。

階層化された背景

バックグラウンドアプリケーションをコンテンツボックス、パディングボックス、およびボーダーボックスに制御するために、 background-clipを使用して層状の背景を作成します。

 p {
  / * ...以前のスタイル... */
  ディスプレイ：Flex;
  Align-Items：Center;
  justify-content：space-bethed;
  ボックスサイズ：ボーダーボックス;
  境界線：ソリッド$ B透明。
  パディング：$ p;
  背景： 
    線形勾配（#dbdbdb、#fff）コンテンツボックス、 
    線形勾配（var（ - スリスト））パディングボックス、 
    線形勾配（#FFF、#DCDCDC）ボードボックス。
  テキストインデント：1EM;
}

この手法により、勾配は、 border-radiusの丸い角を尊重します。

番号付け

段落番号は:afterを使用して追加されます。

 $ d：$ h -2*$ b;

p {
  / * ...以前のスタイル... */
  カウンターインクリメント：c;

  ＆：後 {
    ボックスサイズ：継承;
    国境：継承;
    幅：$ d;高さ：$ d;
    ボーダーラジウス：50％;
    Box-Shadow： 
      INSET 0 0 1PX 1PX #EFEFEF、 
      Inset 0＃{ -  $ b} rgba（＃000、.1）;
    背景： 
      線形勾配（var（ - スリスト））パディングボックス、 
      線形勾配（＃d0d0d0、＃e7e7e7）境界線。
    色：#fff;
    コンテンツ：カウンター（C、10進リードゼロ）;
    ディスプレイ：グリッド;
    場所間：センター;
    マージン右： -  $ p;
    テキストインデント：0;
  }
}

これにより、円形の数字のマーカーが作成されます。

矢印の擬似要素

角度のある矢印は、次:before以下を使用して作成されます。

 p {
  / * ...以前のスタイル... */
  位置：相対;

  ＆：前に {
    位置：絶対;
    右： -  $ b;
    幅：$ h;
    高さ：$ h;
    Border-Radius：$ B;
    変換：回転（45DEG）;
    Box-Shadow：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 中国語 Web サイトの他の関連記事を参照してください。