编程新手求助：制作带彩色阴影、圆角无边框的多按钮盒子

以下是纯HTML+CSS的实现方案，完全匹配你的需求，关键属性都做了标注说明：

HTML 结构 #

<div class="custom-box">
  <button class="btn btn-red">红色按钮</button>
  <button class="btn btn-blue">蓝色按钮</button>
  <button class="btn btn-green">绿色按钮</button>
  <button class="btn btn-purple">紫色按钮</button>
</div>

CSS 样式 #

/* 自定义盒子核心样式 */
.custom-box {
  width: 400px;
  padding: 30px;
  border: none; /* 移除边框 */
  border-radius: 16px; /* 圆角设置，数值越大弧度越明显 */
  /* 彩色阴影：可叠加多个不同颜色的阴影层 */
  box-shadow: 0 8px 16px rgba(255, 99, 71, 0.3), 0 4px 8px rgba(100, 149, 237, 0.2);
  background-color: #fff;
  /* 让按钮居中排列，自动换行 */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 通用按钮样式 */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease; /* hover 时的平滑过渡 */
}

/* 不同颜色按钮 */
.btn-red {
  background-color: #ff6347;
  color: #fff;
}

.btn-blue {
  background-color: #6495ed;
  color: #fff;
}

.btn-green {
  background-color: #32cd32;
  color: #fff;
}

.btn-purple {
  background-color: #9370db;
  color: #fff;
}

/* 按钮 hover 交互效果 */
.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

关键属性说明 #

• border-radius: 控制圆角大小，支持像素(px)或百分比(%)单位，数值越大圆角弧度越柔和。
• box-shadow: 格式为水平偏移 垂直偏移 模糊半径 扩散半径 颜色，用逗号分隔可叠加多层彩色阴影，营造层次感。
• border: none: 彻底清除盒子和按钮的默认边框，实现无边框效果。
• 多色按钮: 通过给不同按钮类设置独立的background-color实现，搭配color保证文字清晰可读。

你可以根据需求调整盒子宽度、圆角尺寸、阴影颜色或按钮的大小、配色，适配不同场景。

内容的提问来源于stack exchange，提问作者Malemsana