如何为含子元素的DIV添加3D侧边圆角并同步至内部元素

下面提供两种方案，分别对应简易模拟版和更逼真的3D立体版，都能让父容器和内部子元素同步拥有侧边圆角的立体效果，替代普通的border-radius二维圆角。

一、简易模拟版（渐变+伪元素实现） #

这种方案用线性渐变模拟侧边的立体阴影，配合圆角实现近似3D的视觉效果，兼容性好，适合快速落地。

CSS 代码 #

/* 父容器基础样式 */
.parent-simple {
  position: relative;
  width: 320px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #ffffff;
  overflow: hidden; /* 避免伪元素超出容器范围 */
}

/* 左侧立体侧边圆角 */
.parent-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  /* 渐变模拟从暗到亮的立体侧边 */
  background: linear-gradient(to right, #e6e6e6, #ffffff);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

/* 右侧立体侧边圆角 */
.parent-simple::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  background: linear-gradient(to left, #e6e6e6, #ffffff);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* 子元素同步样式 */
.parent-simple .child-simple {
  background: #ffffff;
  padding: 1rem;
  margin-bottom: 0.8rem;
  position: relative;
  /* 左右内边距避开父容器伪元素宽度，防止内容被遮挡 */
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}

.parent-simple .child-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to right, #f0f0f0, #ffffff);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.parent-simple .child-simple::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to left, #f0f0f0, #ffffff);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

HTML 结构 #

<div class="parent-simple">
  <div class="child-simple">子元素内容1</div>
  <div class="child-simple">子元素内容2</div>
  <div class="child-simple">子元素内容3</div>
</div>

二、3D立体版（斜切变换+阴影实现） #

通过CSS的skewY()斜切变换配合阴影，实现更逼真的立体侧边圆角效果，视觉层次更强。

CSS 代码 #

/* 全局变量统一控制参数，方便快速调整 */
:root {
  --parent-side-width: 14px;
  --parent-corner-radius: 14px;
  --parent-skew-angle: 16deg;
  
  --child-side-width: 10px;
  --child-corner-radius: 10px;
  --child-skew-angle: 13deg;
}

/* 父容器3D样式 */
.parent-3d {
  position: relative;
  width: 320px;
  margin: 3rem auto;
  padding: 1.8rem;
  background: #ffffff;
  /* 开启3D空间，增强立体视觉 */
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 左侧3D侧边圆角 */
.parent-3d::before {
  content: "";
  position: absolute;
  top: calc(var(--parent-corner-radius)/2);
  bottom: calc(var(--parent-corner-radius)/2);
  left: calc(-1 * var(--parent-side-width));
  width: var(--parent-side-width);
  background: #e0e0e0;
  /* 斜切变换模拟立体侧边 */
  transform: skewY(calc(-1 * var(--parent-skew-angle)));
  border-top-left-radius: var(--parent-corner-radius);
  border-bottom-left-radius: var(--parent-corner-radius);
  /* 阴影增强立体感 */
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.12);
}

/* 右侧3D侧边圆角 */
.parent-3d::after {
  content: "";
  position: absolute;
  top: calc(var(--parent-corner-radius)/2);
  bottom: calc(var(--parent-corner-radius)/2);
  right: calc(-1 * var(--parent-side-width));
  width: var(--parent-side-width);
  background: #e0e0e0;
  transform: skewY(var(--parent-skew-angle));
  border-top-right-radius: var(--parent-corner-radius);
  border-bottom-right-radius: var(--parent-corner-radius);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
}

/* 子元素同步3D样式 */
.parent-3d .child-3d {
  background: #ffffff;
  padding: 1rem;
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
  transform-style: preserve-3d;
}

.parent-3d .child-3d::before {
  content: "";
  position: absolute;
  top: calc(var(--child-corner-radius)/2);
  bottom: calc(var(--child-corner-radius)/2);
  left: calc(-1 * var(--child-side-width));
  width: var(--child-side-width);
  background: #f5f5f5;
  transform: skewY(calc(-1 * var(--child-skew-angle)));
  border-top-left-radius: var(--child-corner-radius);
  border-bottom-left-radius: var(--child-corner-radius);
  box-shadow: -1px 0 4px rgba(0, 0, 0, 0.08);
}

.parent-3d .child-3d::after {
  content: "";
  position: absolute;
  top: calc(var(--child-corner-radius)/2);
  bottom: calc(var(--child-corner-radius)/2);
  right: calc(-1 * var(--child-side-width));
  width: var(--child-side-width);
  background: #f5f5f5;
  transform: skewY(var(--child-skew-angle));
  border-top-right-radius: var(--child-corner-radius);
  border-bottom-right-radius: var(--child-corner-radius);
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.08);
}

HTML 结构 #

<div class="parent-3d">
  <div class="child-3d">子元素内容1（3D版）</div>
  <div class="child-3d">子元素内容2（3D版）</div>
  <div class="child-3d">子元素内容3（3D版）</div>
</div>

注意事项 #

1. 可以通过修改CSS变量（:root里的参数）快速调整侧边宽度、圆角大小、斜切角度，适配不同设计需求；
2. 子元素的左右内边距需要和对应伪元素的宽度匹配，避免内容被侧边伪元素遮挡；
3. 如果需要兼容IE等旧浏览器，可以去掉transform-style和perspective属性，仅保留斜切和圆角效果；
4. 若父容器或子元素有背景色，需确保伪元素的渐变颜色和背景色衔接自然，避免出现断层。

内容的提问来源于stack exchange，提问作者postFix