如何设置仅在元素底部生效的inset类型box-shadow内阴影

开发页面Hero Section模块时，需要实现模块背景图向底部渐变模糊融合的效果，初始编写的CSS代码如下：

.hero-section {
  height: 100vh;
  background-image: url("../../assets/Images/governance.png");
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 30px 40px #232323 inset;
  margin-bottom: 10rem;
}

上述代码设置的inset内阴影会在元素四周同时生效，需要调整box-shadow属性，让模糊阴影效果仅在元素底部一侧显示。

box-shadow属性的语法规则为：box-shadow: 水平偏移量 垂直偏移量 模糊半径 扩散半径 阴影颜色 阴影模式，要让内阴影只在底部显示，核心是通过偏移把阴影整体移动到底部区域，再通过负扩散半径裁切掉左右、顶部多余的阴影。

修改后的代码如下：

.hero-section {
  height: 100vh;
  background-image: url("../../assets/Images/governance.png");
  background-size: cover;
  background-repeat: no-repeat;
  /* 仅底部生效的内阴影 */
  box-shadow: 0 70px 40px -30px #232323 inset;
  margin-bottom: 10rem;
}

参数调整逻辑：

• 水平偏移设为0，保证阴影不会向左右偏移
• 垂直偏移设为70px（正数代表向下偏移），把阴影整体移动到元素底部区域，顶部不会露出阴影
• 模糊半径设为40px，控制渐变模糊的柔和度，数值越大过渡越自然
• 扩散半径设为-30px（负值代表向内收缩阴影范围），裁切掉左右两侧多余的阴影，只保留底部的模糊效果

如果需要更顺滑的渐变融合效果，可以额外叠加mask-image属性，让元素底部自然透明过渡，适配不同页面背景：

.hero-section {
  /* 上述已有属性保留，追加下方样式 */
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

可以根据实际视觉效果调整垂直偏移、模糊半径、扩散半径以及mask渐变的百分比数值，匹配设计需求。

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