css制作下沉

下沉效果实现方法

通过CSS的box-shadow属性可以轻松实现元素的下沉视觉效果。这种效果模拟了元素被按压或嵌入页面的感觉。

基础下沉样式

.sink-effect {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

高级下沉效果

.advanced-sink {
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
  position: relative;
  top: 1px;
}

交互式下沉按钮

.btn {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 0 #2980b9;
  transition: all 0.1s;
}

.btn:active {
  box-shadow: 0 1px 0 #2980b9;
  transform: translateY(3px);
}

3D下沉效果

.three-d-sink {
  background: #e74c3c;
  border: none;
  border-bottom: 5px solid #c0392b;
  color: white;
  padding: 10px 20px;
  transition: all 0.1s;
}

.three-d-sink:active {
  border-bottom: 2px solid #c0392b;
  transform: translateY(3px);
}

这些CSS代码片段展示了不同复杂程度的下沉效果实现方式，可以根据具体需求选择合适的方案。