将（伪）元素限制到其父元的边框框

该教程展示了一种干净的方法，可以将伪元素显示在其父母的边框盒中，避免使用复杂的解决方法。目标是使用最小的标记和有效的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中文网其他相关文章！