圆形Div底部半圆内阴影实现问题：阴影位置错误

我懂你要的效果——只在圆形Div的底部半圆区域添加内阴影，你当前用的box-shadow: inset 3px 3px 3px -1px #000;之所以无效，是因为常规的inset阴影是作用于元素整个边缘的，没办法精准只控制底部半圆的范围。下面给你两个实用的实现方案：

方案一：用径向渐变模拟内阴影 #

这种方法不需要额外元素，直接通过背景渐变就能实现精准的底部半圆阴影，调整参数就能控制阴影的深浅和范围：

.circular-div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ffffff;
  /* 径向渐变模拟底部内阴影 */
  background-image: radial-gradient(
    ellipse at center bottom, /* 渐变原点在元素底部中心 */
    rgba(0, 0, 0, 0.3) 0%,   /* 阴影起始颜色（可调整透明度） */
    rgba(0, 0, 0, 0) 70%     /* 阴影终止于透明，70%控制阴影覆盖范围 */
  );
}

原理是通过径向渐变从底部中心向外扩散，从深色过渡到透明，刚好覆盖圆形的下半部分，完美模拟内阴影效果。

方案二：伪元素+Inset阴影 #

如果更倾向于用原生box-shadow属性，可以借助伪元素配合overflow:hidden来实现：

.circular-div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  overflow: hidden; /* 确保伪元素不会超出圆形范围 */
}

.circular-div::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-radius: 50% 50% 0 0; /* 把伪元素做成上半圆 */
  box-shadow: inset 0 -3px 3px -1px rgba(0, 0, 0, 0.3); /* 内阴影向上扩散 */
}

这里的思路是用伪元素创建一个和圆形下半部分匹配的半圆，然后给伪元素添加inset阴影——因为inset阴影的方向是反向的，所以用0 -3px让阴影向上扩散，刚好贴合圆形底部的内边缘。

你之前的代码问题在于，inset 3px 3px是让阴影从元素的右上角向内延伸，自然不会出现在底部区域，而且常规box-shadow无法限制在半圆范围内，所以上面的两种方法更适合你的需求。

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