如何用CSS实现图中新拟态（neumorphic）风格的输入框？

除了调整box-shadow参数，还可以通过以下手段让新拟态效果更锐利、贴合预期：

• 添加极细同色系边框：填补阴影与背景的衔接缝隙，避免模糊感
• 启用will-change属性：提示浏览器提前优化元素渲染，减少重绘导致的失真
• 设置background-clip匹配圆角：确保背景和阴影完全贴合border-radius，避免边缘溢出
• 优化聚焦状态样式：保持新拟态风格的同时强化锐利的聚焦反馈
• 微调对比度滤镜：增强阴影明暗层次，让凹陷效果更清晰

修改后的完整代码 #

CSS代码

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
body {
  background: #efefef;
}

input {
  padding: 1.5em 5em;
  background: #efefef;
  border: 1px solid rgba(255,255,255,0.2); /* 细边框填补阴影缝隙 */
  border-radius: 1.5rem;
  color: #444;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .2rem;
  text-align: center;
  outline: none;
  box-shadow: inset -6px -6px 14px rgba(255, 255, 255, .7), inset -6px -6px 10px rgba(255, 255, 255, .5), inset 6px 6px 8px rgba(255, 255, 255, .075), inset 6px 6px 10px rgba(0, 0, 0, .15);
  will-change: box-shadow; /* 提升渲染精度 */
  background-clip: padding-box; /* 背景贴合圆角范围 */
  transition: all 0.2s ease;
}

input:focus {
  box-shadow: inset -2px -2px 6px rgba(255,255,255,.6), inset 2px 2px 6px rgba(0,0,0,.1); /* 聚焦时调整阴影保持锐利 */
  border-color: rgba(255,255,255,0.3);
  filter: contrast(1.05); /* 微调对比度增强明暗层次 */
}

.form-input {
  font-size: 2rem;
  position: relative;
}

.form-input .icon {
  left: 0;
  margin: .5em;
  position: absolute;
  top: 0;
}

HTML代码

<div class="form-input">
  <label for="input4" class="icon glyphicon glyphicon-pencil"></label>
  <input type='text' placeholder='Text' />
</div>

各优化点说明 #

1. 细边框：解决阴影与背景衔接处的模糊缝隙，让轮廓更清晰，同时不破坏新拟态的融合感
2. will-change：提示浏览器对阴影属性提前优化渲染，减少因动态变化导致的模糊失真
3. background-clip: padding-box：确保背景不会溢出圆角范围，避免边缘出现不规则色块
4. 聚焦状态优化：缩小阴影范围并调整透明度，保持新拟态风格的同时，让聚焦反馈更锐利
5. contrast滤镜：轻微提升对比度，让阴影的明暗层次更分明，凹陷效果更突出

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