文章美化——添加颜色标签

以下为最终效果展示：

标签黄色，这是一个简单的测试

标签橘色，这是一个简单的测试

标签红色，这是一个简单的测试

标签粉色，这是一个简单的测试

标签紫色，这是一个简单的测试

一.添加CSS代码

.note-orange {
    margin: 0 0 1rem;
    padding: 0.1rem 0.8rem;
    border-left: 1rem solid #EC8A64;
    background-color: rgba(236,138,100,0.1);
    color: #6a737d;
    border-radius: 20px
}
.note-pink {
    margin: 0 0 1rem;
    padding: 0.1rem 0.8rem;
    border-left: 1rem solid #F48FB1;
    background-color: rgba(244,143,177,0.1);
    color: #6a737d;
    border-radius: 20px
}
.note-red {
    margin: 0 0 1rem;
    padding: 0.1rem 0.8rem;
    border-left: 1rem solid #C92642;
    background-color: rgba(201,38,66,0.1);
    color: #6a737d;
    border-radius: 20px
}
.note-purple {
    margin: 0 0 1rem;
    padding: 0.1rem 0.8rem;
    border-left: 1rem solid #A86FC7;
    background-color: rgba(168,111,199,0.1);
    color: #6a737d;
    border-radius: 20px
}
.note-yellow {
    margin: 0 0 1rem;
    padding: 0.1rem 0.8rem;
    border-left: 1rem solid #F7FF98;
    background-color: rgba(247,255,152,0.1);
    color: #6a737d;
    border-radius: 20px
}

添加到引用的CSS文件中任意位置即可，一些属性可以自行修改，比如：.note-yellow，.note-red之类的是class命名，作用是指定给HTML标签的class值为note-yellow的内容添加括号里的属性，可以随意修改比如改成.aclass属性就要相应地改成class="a"。使用时，只要在Markdown里面写HTML代码就能直接使用。

margin：设置外边距

padding：设置内边距

border-left：左边框（三个参数对应：边框大小 边框样式 边框颜色）

background-color：背景颜色（rgba是带透明度的颜色）

border-radius：设置边框圆角大小

二.使用

如果是用Markdown写文章，Markdown源码（Markdown可以直接使用部分HTML语言），理论上能使用HTML语言的都可以直接像这样使用：

<p class="note-purple">测试内容，这是测试1，紫色</p>
<p class="note-yellow">测试内容，这是测试2，黄色</p>
<p class="note-orange">测试内容，这是测试3，橘色</p>
<p class="note-pink">测试内容，这是测试4，粉色</p>
<p class="note-red">测试内容，这是测试5，红色</p>

测试内容，这是测试1，紫色

测试内容，这是测试2，黄色

测试内容，这是测试3，橘色

测试内容，这是测试4，粉色

测试内容，这是测试5，红色