通过定义.success、.warning、.error、.info等CSS类设置提示信息颜色，分别用绿、橙、红、蓝配色区分状态，结合背景色、边框和文字颜色提升可读性，并在HTML中应用对应类名，使用户快速识别信息类型，同时建议配合图标或文字标签以增强可访问性。
要通过CSS设置提示信息的颜色，关键是为目标元素应用合适的颜色样式。你可以根据提示类型（如成功、警告、错误、信息）定义不同的文字或背景颜色，让用户快速识别状态。
1. 定义不同类型的提示类
给不同提示信息添加对应的CSS类，比如 .success、.warning、.error、.info，然后分别设置颜色：
- .error：用红色表示错误信息
- .success：用绿色表示操作成功
- .warning：用橙色或黄色表示警告
- .info：用蓝色表示一般提示
2. 编写CSS样式
在CSS中设置文字颜色、背景色和边框，增强可读性：
.info {
color: #0056b3;
background-color: #d4edff;
border: 1px solid #a0d4f0;
padding: 8px 12px;
border-radius:
4px;
}
.success {
color: #28a745;
background-color: #d4edda;
border: 1px solid #c3e6cb;
padding: 8px 12px;
border-radius: 4px;
}
.warning {
color: #ffc107;
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 8px 12px;
border-radius: 4px;
}
.error {
color: #dc3545;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
padding: 8px 12px;
border-radius: 4px;
}
4px;
}
.success {
color: #28a745;
background-color: #d4edda;
border: 1px solid #c3e6cb;
padding: 8px 12px;
border-radius: 4px;
}
.warning {
color: #ffc107;
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 8px 12px;
border-radius: 4px;
}
.error {
color: #dc3545;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
padding: 8px 12px;
border-radius: 4px;
}
3. 在HTML中使用
将这些类应用到你的提示容器中，比如 或 标签：
基本上就这些。合理使用语义化的类名和清晰的颜色搭配，能让提示信息更直观。记得考虑色盲用户，可以配合图标或文字标签提升可访问性。不复杂但容易忽略细节。
这是普通提示信息
操作成功！
请注意，配置可能有风险
提交失败，请检查网络
