绿色提示框样式展示与使用方法
在网页设计中，提示信息的可读性和美观性尤为重要。本文为你展示一种使用纯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 图标。
© 原创声明：本文由 四六啦工具 于 2 天 前发表在 代码笔记 分类目录中，最后更新于2025年7月31日，转载请注明本文永久链接：https://www.46.la/green-alert-css-style
相关文章
本文暂时没有评论，来添加一个吧(●'◡'●)