Markdown 警告框与颜色代码大全 🎨

Markdown Beautification

🌟 概述

本文档详细介绍了如何在 Markdown 中使用自定义样式创建精美的警告框，并提供了丰富的颜色代码参考表。通过本指南，您可以让您的文档更加生动、专业且易于阅读！

⚠️ Markdown 警告框使用指南

基本结构解析

1
2
3

<div style="background: #FFD700; padding: 12px;">
    <p style="font-size:22px;color:#8B0000;"><strong>警告：这是一个警告框。</strong></p>
</div>

🎨 background: #FFD700 - 定义警告框背景颜色
📏 padding: 12px - 定义内边距大小
🔤 font-size:22px - 定义文字大小
🎯 color:#8B0000 - 定义文字颜色
🔷 <strong> - 文字加粗标签

🎯 警告框示例集

示例一：警告加粗，内容正常

1
2
3

<div style="background: #FFD700; padding: 12px;">
    <p style="font-size:22px;"><strong>警告：</strong>这是一个警告框。</p>
</div>

🟡 警告框示例：警告加粗，内容正常

警告：这是一个警告框。

示例二：全部文字加粗

1
2
3

<div style="background: #FFD700; padding: 12px;">
    <p style="font-size:22px;"><strong>警告：这是一个警告框。</strong></p>
</div>

🟡 警告框示例：全部文字加粗

警告：这是一个警告框。

示例三：全部文字加粗并添加颜色

1
2
3

<div style="background: #FFD700; padding: 12px;">
    <p style="font-size:22px;color:#8B0000;"><strong>警告：这是一个警告框。</strong></p>
</div>

🟡 警告框示例：全部文字加粗并添加颜色

警告：这是一个警告框。

示例四：全部文字加粗居中并添加颜色

1
2
3

<div style="background: #FFD700; padding: 12px; display: flex; flex-direction: column; justify-content: center;">
    <p style="font-size:22px;color:#8B0000;text-align:center;"><strong>警告：这是一个警告框。</strong></p>
</div>

🟡 警告框示例：全部文字加粗居中并添加颜色

警告：这是一个警告框。

🎓 高级技巧

组合使用示例

<div style="background: #E0FFFF; padding: 15px; border-left: 5px solid #20B2AA;">
    <p style="font-size:18px;color:#008080;text-align:center;">
        <strong>💡 提示：</strong>这是一个自定义的信息框示例！
    </p>
</div>

💡 提示：这是一个自定义的信息框示例！

响应式设计技巧

<div style="background: #FFD700; padding: 12px; margin: 10px 0; border-radius: 5px;">
    <p style="font-size:calc(16px + 0.5vw);color:#8B0000;">
        <strong>📱 响应式警告：</strong>这个框会根据屏幕大小调整字体！
    </p>
</div>

📱 响应式警告：这个框会根据屏幕大小调整字体！