css制作立体按钮

使用box-shadow创建立体效果

通过box-shadow属性可以轻松实现按钮的立体感。为按钮添加底部阴影，模拟光线从上方照射的效果：

.raised-button {
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.raised-button:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

.raised-button:active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transform: translateY(1px);
}

使用border模拟3D边缘

通过设置不同颜色的边框可以创造凸起或凹陷的视觉效果：

.embossed-button {
  background: #ddd;
  color: #333;
  padding: 10px 20px;
  border-width: 3px;
  border-style: solid;
  border-top-color: #fff;
  border-left-color: #fff;
  border-right-color: #999;
  border-bottom-color: #999;
}

.embossed-button:active {
  border-top-color: #999;
  border-left-color: #999;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

渐变背景增强立体感

线性渐变可以模拟光源照射产生的明暗变化：

.gradient-button {
  background: linear-gradient(to bottom, #6b8cff, #3a66ff);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 0 #1a3dcc, 0 5px 10px rgba(0,0,0,0.2);
}

.gradient-button:hover {
  background: linear-gradient(to bottom, #7d9bff, #4b75ff);
}

.gradient-button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #1a3dcc, 0 2px 5px rgba(0,0,0,0.2);
}

使用伪元素创建高级效果

通过::before或::after伪元素可以添加额外的立体层次：

.layered-button {
  position: relative;
  background: #ff6b6b;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  z-index: 1;
}

.layered-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ff5252;
  border-radius: 6px;
  transform: translateY(4px);
  z-index: -1;
  transition: transform 0.2s ease;
}

.layered-button:hover::before {
  transform: translateY(6px);
}

.layered-button:active::before {
  transform: translateY(2px);
}

结合CSS变量实现动态效果

使用CSS变量可以更方便地调整立体效果的强度：

:root {
  --button-depth: 4px;
  --button-color: #6200ee;
}

.dynamic-button {
  background: var(--button-color);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 var(--button-depth) 0 color-mix(in srgb, var(--button-color) 70%, black),
              0 calc(var(--button-depth) + 2px) 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.dynamic-button:hover {
  --button-depth: 6px;
}

.dynamic-button:active {
  --button-depth: 2px;
  transform: translateY(2px);
}