当前位置：首页 > CSS

制作css消息框

2026-04-02 11:54:01CSS

使用纯CSS创建消息框

消息框可以通过CSS的边框、背景色、圆角等属性实现。以下是一个基础的CSS消息框样式：

.message-box {
  padding: 12px 16px;
  border-radius: 4px;
  margin: 10px 0;
  border: 1px solid transparent;
}

.success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

.info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}

对应的HTML结构：

<div class="message-box success">操作成功</div>
<div class="message-box error">发生错误</div>
<div class="message-box warning">警告提示</div>
<div class="message-box info">信息通知</div>

添加图标的消息框

通过伪元素添加图标增强视觉效果：

制作css消息框

.message-box-with-icon {
  position: relative;
  padding-left: 40px;
}

.message-box-with-icon::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.success::before {
  background-image: url('data:image/svg+xml;utf8,<svg...>');
}

.error::before {
  background-image: url('data:image/svg+xml;utf8,<svg...>');
}

带动画效果的消息框

添加淡入和滑动动画：

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

@keyframes slideIn {
  from { transform: translateY(-20px); }
  to { transform: translateY(0); }
}

.animated-message {
  animation: fadeIn 0.3s ease-in-out, slideIn 0.3s ease-in-out;
}

可关闭的消息框

实现带关闭按钮的交互式消息框：

制作css消息框

.close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

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

对应的HTML结构：

<div class="message-box success">
  <span>操作成功</span>
  <span class="close-btn">&times;</span>
</div>

浮动消息框样式

创建固定在页面某个位置的浮动消息框：

.floating-message {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 300px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

这些CSS样式可以根据实际需求组合使用，创建各种类型的消息提示框。颜色、尺寸和动画效果都可以根据项目设计规范进行调整。