当前位置：首页 > CSS

制作css消息框

2026-03-12 16:03:27CSS

使用纯CSS创建消息框

通过CSS可以创建多种风格的消息框，无需依赖JavaScript或外部库。以下是几种常见的实现方式：

基础消息框样式

.message-box {
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: 4px;
  font-family: sans-serif;
  border: 1px solid transparent;
}

不同类型消息框

.info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

.warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.error {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

带图标的CSS消息框

结合伪元素和Unicode字符添加图标：

.icon-box:before {
  margin-right: 10px;
  font-family: "Segoe UI Symbol";
}

.info-icon:before {
  content: "\2139";
}

.success-icon:before {
  content: "\2714";
}

.warning-icon:before {
  content: "\26A0";
}

.error-icon:before {
  content: "\2716";
}

动画效果消息框

添加淡入和滑动效果：

.fade-in {
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

关闭按钮实现

纯CSS关闭按钮方案：

.close-btn {
  float: right;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
}

.close-btn:hover {
  opacity: 1;
}

实际应用示例

HTML结构：

<div class="message-box success success-icon fade-in">
  操作成功完成
  <span class="close-btn" aria-hidden="true">&times;</span>
</div>

完整CSS：

制作css消息框

.message-box {
  position: relative;
  padding: 15px;
  margin: 1em 0;
  border-radius: 4px;
  font-family: sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.close-btn {
  float: right;
  cursor: pointer;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.close-btn:hover {
  opacity: 1;
}

这些方法可以根据具体需求进行组合和调整，创建各种风格和功能的CSS消息框。