HTML中怎么制作内凹质感的扁平按钮？内阴影属性应用技巧-html教程-PHP中文网

button元素直接加box-shadow: inset无效，因其为替换元素，原生盒模型不暴露可投射内表面；需用div容器包裹并设overflow: hidden、显式宽高，button自身设border: none和background: transparent，再于容器上应用inset阴影。

html中怎么制作内凹质感的扁平按钮？内阴影属性应用技巧

button 元素直接加 `box-shadow: inset` 为什么没反应

因为 button 是替换元素 + 表单控件混合体，浏览器对其内阴影渲染有特殊限制：即使写了 box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)，DevTools 里样式生效，但页面上就是不显示。这不是 bug，是规范行为——inset 阴影需要明确的“内容区域”支撑，而原生 button 的内部盒模型不暴露可投射的内表面。

用 `div` 包裹 `button` 实现可靠内凹效果

这是最稳妥、语义清晰且兼容性好的方案。关键不在“套壳”，而在容器控制权：

div 容器必须设 overflow: hidden，否则 inset 阴影可能溢出边缘
容器需显式声明 width 和 height（或用 aspect-ratio），不能依赖 button 自身尺寸撑开
button 本身要去掉默认边框和背景干扰：border: none; background: transparent;
为避免行内对齐空隙，推荐给容器加 display: inline-block

示例结构：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

<div class="btn-inset">
  <button>提交</button>
</div>

.btn-inset {
  width: 120px;
  height: 40px;
  overflow: hidden;
  display: inline-block;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.15);
}
.btn-inset button {
  width: 100%;
  height: 100%;
  border: none;
  background: #f5f5f5;
  font: inherit;
  cursor: pointer;
}