美化有序标签

效果演示：

1. 我是第一个标签
2. 我是第二个标签
3. 我是第三个标签

实现步骤：打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

ol{
list-style: none;  /* 隐藏原来的 1. 2. 等序号样式 */
counter-reset: ol-li;
}

ol li:before {
display: block;
float: left;
width: 19px;   /* 宽度和高度需要根据自己的字体大小进行修正 */
height: 19px;
line-height: 19px;
margin: 4px 12px 0 0;
color: #fff;
font-size: 16px;
font-weight: 300;
font-style: normal;
background-color: #49b1f5;
border-radius: 50%;
text-align: center;
content: counter(ol-li);
counter-increment: ol-li;
transition: all .5s;
}
#post ol li:hover::before{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}

美化无序标签

效果演示：

• 我是第一个标签
• 我是第二个标签
• 我是第三个标签

实现步骤：
打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

#post ul {
margin-top: 0.4rem;
padding: 0 0 0 0.8rem;
list-style: none;
counter-reset: li;
}

#post ul li {
position: relative;
margin: 0.2rem 0;
padding: 0.1rem 0.5rem 0.1rem 1.5rem;
}

#post ul li:hover:before {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#post ul li:before {
position: absolute;
top: 0;
left: 0;
background: #49b1f5;
color: #fff;
cursor: pointer;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

 #post ul > li:hover:before {
border-color: #ff7242;
}
#post ul > li:before {
top: 12.5px;
width: 0.8rem;
height: 0.8rem;
border: 0.2rem solid #49b1f5;
border-radius: 0.4rem;
background: transparent;
content: '';
line-height: 0.3rem;
}

美化分隔符 hr 样式

就如本站的分隔符，是一个虚线和剪刀，让我们先引入图标库放在头部自定义即可

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

/* 美化 hr 样式 */
hr {
position: relative;
margin: 2rem auto;
width: calc(100% - 4px);
border: 2px dashed #a4d8fa;
background: #fff;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

hr:before {
position: absolute;
top: -10px;
left: 5%;
z-index: 1;
color: #49b1f5;
content: '\f0c4';
font: normal normal normal 14px/1 FontAwesome;
font-size: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

hr:hover::before{
left: 95%;
}

效果演示：

常用的 note 标签

效果演示：

实现步骤：我们先引入图标库放在头部自定义即可

<link type='text/css' rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media='all'/>

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

/* note 公共样式 */
.note {
position: relative;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
border: initial;
border-left: 3px solid #eee;
background-color: #f9f9f9;
border-radius: 3px;
font-size: var(--content-font-size);
}

.note:not(.no-icon):before {
position: absolute;
font-family: FontAwesome;
font-size: larger;
top: 11px;
left: 15px;
}

.note:not(.no-icon) {
padding-left: 45px;
}

.note.info {
background-color: #eef7fa;
border-left-color: #428bca;
}

.note.info:not(.no-icon):before {
content: "\f05a";
color: #428bca;
}

.note.warning {
background-color: #fdf8ea;
border-left-color: #f0ad4e;
}

.note.warning:not(.no-icon):before {
content: "\f06a";
color: #f0ad4e;
}

.note.primary {
background-color: #f5f0fa;
border-left-color: #6f42c1;
}

.note.primary:not(.no-icon):before {
content: "\f055";
color: #6f42c1;
}

.note.danger {
background-color: #fcf1f2;
border-left-color: #d9534f;
}

.note.danger:not(.no-icon):before {
content: "\f056";
color: #d9534f;
}

在写 md 时使用方式如下，以 html 标签方式引入：

<div class="note info">这里是 info 标签样式</div>

<div class="note info no-icon">这里是不带符号的 info 标签样式</div>

<div class="note primary">这里是 primary 标签样式</div>

<div class="note primary no-icon">这里是不带符号的 primary 标签样式</div>

<div class="note warning">这里是 warning 标签样式</div>

<div class="note warning no-icon">这里是不带符号的 warning 标签样式</div>

<div class="note danger">这里是 danger 标签样式</div>

<div class="note danger no-icon">这里是不带符号的 danger 标签样式</div>

渐变 note 标签样式

效果演示：

实现步骤：
我们先引入图标库放在头部自定义即可

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px
}

.tip p {
margin: 5px 0!important
}

.tip:before {
background: #20a0ff;
background: -webkit-gradient(linear,left bottom,left top,from(#0092ff),to(#20b8ff));
background: -webkit-linear-gradient(bottom,#0092ff,#20b8ff);
background: linear-gradient(0deg,#0092ff,#20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center
}

.btn,.getit a {
position: relative
}

.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9
}

.tip ol {
margin: 0
}

.tip.success {
background: #61be33;
background: -webkit-gradient(linear,left top,right top,from(#61be33),to(#8fce44));
background: -webkit-linear-gradient(left,#61be33,#8fce44);
background: linear-gradient(90deg,#61be33,#8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104,195,59,.5);
box-shadow: 0 3px 5px rgba(104,195,59,.5)
}

.tip.success:before {
background: -webkit-gradient(linear,left bottom,left top,from(#52bb1d),to(#95d34b));
background: -webkit-linear-gradient(bottom,#52bb1d,#95d34b);
background: linear-gradient(0deg,#52bb1d,#95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33
}

.tip.warning {
background: #ff953f;
background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
background: -webkit-linear-gradient(left,#ff953f,#ffb449);
background: linear-gradient(90deg,#ff953f,#ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
box-shadow: 0 3px 5px rgba(255,154,73,.5)
}

.tip.warning:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff8f35),to(#ffc149));
background: -webkit-linear-gradient(bottom,#ff8f35,#ffc149);
background: linear-gradient(0deg,#ff8f35,#ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f
}

.tip.error {
background: #ff4949;
background: -webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));
background: -webkit-linear-gradient(left,#ff4949,#ff7849);
background: linear-gradient(90deg,#ff4949,#ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255,73,73,.5);
box-shadow: 0 3px 5px rgba(255,73,73,.5)
}

.tip.error:before {
background: -webkit-gradient(linear,left bottom,left top,from(#ff3838),to(#ff7849));
background: -webkit-linear-gradient(bottom,#ff3838,#ff7849);
background: linear-gradient(0deg,#ff3838,#ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949
}

/*夜间适配*/
.night .tip {
filter: brightness(0.7);
}

/* snote夜间模式 */
.night .tip{
  color: #4c4948;
}

在写 md 时使用方式如下，以 html 标签方式引入：

<div class='tip'><p>默认情况<p></div>
<div class='tip success'><p>success<p></div>
<div class='tip error'><p>error<p></div>
<div class='tip warning'><p>warning<p></div>

多彩信息条美化

效果演示：

这是一个信息条

这是一个信息条

这是一个信息条

这是一个信息条

blockquote {
margin: 0 0 1em;
line-height: 1.8;
font-style: oblique;
background: transparent;
padding: 1em 1em 1em 2em;
border-left: 5px #3498db solid;
}

blockquote {
color: #999;
padding: 1em;
border-radius: 1em;
background: transparent;
border: 2px #ccc dashed;
}