如何调整伪元素border radius以匹配父元素10px圆角

当然可以实现，下面是调整后的方案，完美匹配圆角同时满足你的需求：

核心思路 #

• 利用父元素的overflow: hidden特性，让伪元素的圆角只显示左侧部分，自动匹配父元素的圆角弧度
• 使用CSS变量统一背景色，通过filter: brightness()调暗线条颜色，避免重复写颜色值

完整代码示例 #

/* 定义全局背景色变量 */
:root {
  --box-bg: rgba(0, 255, 50, 0.3);
}

div {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: var(--box-bg);
  border-radius: 10px;
  overflow: hidden; /* 关键：隐藏伪元素超出父元素的部分 */
}

div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  /* 复用背景色变量，通过filter调暗 */
  background-color: var(--box-bg);
  filter: brightness(0.6); /* 调暗到60%亮度，对应你之前的深色效果 */
  border-radius: 10px; /* 和父元素圆角一致，overflow:hidden会自动切掉右侧圆角 */
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 更优雅的居中方式 */
  margin: 0;
}

<div>
  <p>Make me beautiful!</p>
</div>

方案优势 #

• 无需手动计算height: calc(100% - Npx)，伪元素高度直接设100%，适配父元素任意尺寸
• 圆角完全匹配，不会出现错位或弧度不一致的问题
• 通过CSS变量和filter实现颜色统一管理，后期修改更方便

内容的提问来源于stack exchange，提问作者Avarage cat enjoyer