当前位置：首页 > CSS

css盒子怎么制作

2026-02-13 10:54:37CSS

CSS盒子制作方法

使用CSS的box-shadow属性可以创建各种盒子效果。以下是一些常见的盒子制作方法：

简单阴影盒子

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 5px;
}

立体效果盒子

.box-3d {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.2),
             -5px -5px 15px rgba(255,255,255,0.7);
  border-radius: 10px;
}

内嵌效果盒子

.inset-box {
  width: 200px;
  height: 200px;
  background-color: #e0e0e0;
  box-shadow: inset 3px 3px 5px rgba(0,0,0,0.1),
              inset -3px -3px 5px rgba(255,255,255,0.8);
  border-radius: 8px;
}

多层阴影盒子

.multi-shadow-box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12),
              0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.multi-shadow-box:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25),
              0 10px 10px rgba(0,0,0,0.22);
}

盒子模型调整

CSS盒子模型可以通过box-sizing属性进行调整：

.normal-box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  /* 实际宽度 = 200 + 20*2 + 5*2 = 250px */
}

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  /* 实际宽度 = 200px (包含padding和border) */
}

响应式盒子

使用CSS变量和媒体查询创建响应式盒子：

:root {
  --box-width: 200px;
  --box-height: 200px;
}

.responsive-box {
  width: var(--box-width);
  height: var(--box-height);
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  :root {
    --box-width: 150px;
    --box-height: 150px;
  }
}

动画盒子

添加CSS动画效果使盒子更生动：

css盒子怎么制作

.animated-box {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  border-radius: 10px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

这些方法可以根据具体需求组合使用，创建出各种视觉效果丰富的CSS盒子。