css制作凹凸框

使用CSS制作凹凸框效果

方法一：利用box-shadow属性

通过box-shadow的inset值实现内阴影，创造凹陷效果；外阴影则模拟凸起效果。

.convex {
  background: #f0f0f0;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.3), 
              -3px -3px 5px rgba(255,255,255,0.8);
}

.concave {
  background: #f0f0f0;
  box-shadow: inset 3px 3px 5px rgba(0,0,0,0.3), 
              inset -3px -3px 5px rgba(255,255,255,0.8);
}

方法二：结合border-style

利用border-style的ridge（凸起）和groove（凹陷）属性快速实现效果。

.ridge-box {
  border: 10px ridge #ccc;
  background: #f0f0f0;
}

.groove-box {
  border: 10px groove #ccc;
  background: #f0f0f0;
}

方法三：伪元素叠加

通过:before/:after伪元素叠加多层阴影增强立体感。

.enhanced-convex {
  position: relative;
  background: #e0e0e0;
}

.enhanced-convex:before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  right: 2px; bottom: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

方法四：渐变背景模拟

配合线性渐变创造光影过渡效果。

.gradient-box {
  background: linear-gradient(135deg, 
             rgba(255,255,255,0.8) 0%, 
             rgba(200,200,200,0.5) 50%, 
             rgba(0,0,0,0.2) 100%);
  border-radius: 5px;
}

注意事项

• 调整阴影颜色值匹配整体设计风格
• 凸起效果建议使用浅色背景配深色阴影
• 凹陷效果推荐深色背景配亮色内阴影
• 移动端设备需减小阴影扩散值保证性能

完整示例可复制代码测试：

<div class="convex">凸起效果</div>
<div class="concave">凹陷效果</div>