当前位置：首页 > CSS

css制作立体标签

2026-04-02 03:01:49CSS

使用 CSS 制作立体标签

阴影效果

通过 box-shadow 属性为标签添加多层阴影，模拟立体效果。阴影的偏移方向和模糊程度决定了立体感的强弱。

.tag {
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.2),
    4px 4px 8px rgba(0, 0, 0, 0.1);
}

渐变背景

使用 linear-gradient 创建明暗过渡的背景色，增强视觉深度。亮部通常位于左上角，暗部位于右下角。

.tag {
  background: linear-gradient(
    135deg,
    #6a8eff 0%,
    #4a6cf7 50%,
    #3a5bef 100%
  );
}

边框高光

通过 border 和伪元素添加高光边线，突出立体边缘。常见做法是用浅色边框模拟反光效果。

.tag {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.tag::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

文字投影

为标签文字添加 text-shadow 增强层次感。投影方向应与主阴影一致。

.tag-text {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

悬停动画

通过 transform 实现悬停时的动态反馈，强化立体交互感。Y轴移动模拟按压效果。

css制作立体标签

.tag:hover {
  transform: translateY(2px);
  box-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.2),
    2px 2px 4px rgba(0, 0, 0, 0.1);
}

完整示例代码

<style>
  .tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    background: linear-gradient(135deg, #6a8eff, #3a5bef);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    position: relative;
    transition: all 0.2s ease;
  }
  .tag::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px 4px 0 0;
  }
  .tag:hover {
    transform: translateY(2px);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2), 2px 2px 4px rgba(0,0,0,0.1);
  }
  .tag-text {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  }
</style>

<div class="tag">
  <span class="tag-text">立体标签</span>
</div>