将（伪）元素限制到其父元的边框框-css教程-PHP中文网

标记

基本样式

分层背景

编号

箭头伪元素

首页

web前端

css教程

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

William Shakespeare

Apr 19, 2025 am 10:39 AM

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

该教程展示了一种干净的方法，可以将伪元素显示在其父母的边框盒中，避免使用复杂的解决方法。目标是使用最小的标记和有效的CSS一个视觉吸引力的结果。我们将在我们的CSS中使用多种形状或大量列表而无需添加额外的元素来实现这一目标。

挑战在于确保伪元素的样式，尤其是梯度和圆角，严格保留在父母的边界内。让我们探索解决方案。

标记

我们的基本标记使用段落（<p> ）从数据阵列生成的元素（使用pug为简洁）：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><p style="--slist: #ebac79, #d65b56">煎饼松饼巧克力糖浆布朗尼。</p> <p style="--slist: #90cbb7, #2fb1a9">蛋糕柠檬浆果松饼梅卡龙。</p> <p style="--slist: #8a7876, #32201c">晶圆苹果蛋饼松饼姜饼。</p> <p style="--slist: #a6c869, #37a65a">甘草李子顶巧克力柠檬。</p></pre><div class="contentsignin">登录后复制</div></div> <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）;
  }
}