以下为最终效果展示:

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

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

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

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

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

一.添加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,红色

可以是p标签<p>,也可以是<span><div>……等等,只要class属性对应"note-XXX"就能生效。

欢迎在下方积极留言、参与讨论,站长会在查看之后第一时间回复。

喜欢视频创作的程序猿