如何实现div中间渐变分割处的阴影效果？

你用box-shadow没法实现分割线的阴影，因为它是给整个元素添加阴影的，没法针对内部的渐变分界线单独处理。可以用伪元素+滤镜模糊的方式来模拟这个效果，具体代码如下：

.box {
  width: 300px;
  height: 400px;
  background: linear-gradient(-10deg, #ffffff 50%, #d6fa02 50%);
  position: relative;
  overflow: hidden; /* 避免阴影超出容器 */
}

.box::before {
  content: "";
  position: absolute;
  /* 宽高设置足够覆盖斜线区域 */
  width: 200%;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  filter: blur(2px); /* 模糊效果模拟阴影 */
  transform: rotate(-10deg); /* 和渐变角度保持一致 */
  top: 50%; /* 垂直居中，对应渐变50%的分割位置 */
  left: -50%; /* 向左偏移让斜线居中显示 */
}

如果想要阴影更自然，可以调整height、filter: blur()的数值，或者修改background-color的透明度。

另外还有一种思路：把阴影做成渐变的一部分，用多层渐变叠加，不过这种方式的阴影效果比较生硬，适合不需要模糊的场景：

.box {
  width: 300px;
  height: 400px;
  background: 
    /* 中间的阴影线 */
    linear-gradient(-10deg, transparent 49.6%, rgba(0,0,0,0.2) 49.6%, rgba(0,0,0,0.2) 50.4%, transparent 50.4%),
    /* 基础的双色渐变 */
    linear-gradient(-10deg, #ffffff 50%, #d6fa02 50%);
}

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