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>
