美化网站提示信息的CSS样式:绿色提示框效果示例

代码笔记21小时前发布
20 0

绿色提示框样式展示与使用方法

在网页设计中,提示信息的可读性和美观性尤为重要。本文为你展示一种使用纯CSS实现的绿色提示框样式,适合用于成功提示、通知公告、内容说明等场景。

美化网站提示信息的CSS样式:绿色提示框效果示例

绿色提示框效果示例

样式特点

  • 清爽绿色背景,视觉舒适
  • 左侧圆形图标增强识别性
  • 圆角 + 阴影,现代化视觉风格
  • 完全基于CSS,无需引入JS或第三方库

效果预览

📢 该提示框样式适合用于展示网站中的成功消息、说明文本、公告内容等场景,兼容性良好,适配移动端。

完整CSS代码

blockquote p {
  color: #ffffff;
}
blockquote {
  position: relative;
  background-color: #4caf50;
  color: #ffffff;
  border-radius: 10px;
  padding: 20px 20px 20px 70px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
blockquote::before {
  content: "📢";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  background-color: #ffffff33;
  color: #ffffff;
  font-size: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

使用建议

将上述CSS代码加入你网站的样式表中,任何使用 <blockquote> 标签包裹的内容都会自动获得该样式效果。如果你希望更换图标,只需替换 content: "📢"; 为其他 emoji 或 SVG 图标。

© 原创声明:本文由 四六啦工具 于 21 小时 前发表在 代码笔记 分类目录中,最后更新于2025年7月31日,转载请注明本文永久链接:https://www.46.la/green-alert-css-style

相关文章

暂无评论

本文暂时没有评论,来添加一个吧(●'◡'●)