本文分享了哔哔一二自用的一些文章美化代码，主要是给指定文字内容添加一些样式，以高亮突出重要性。
这是一段黑色文字的代码效果
这是一段蓝色文字的代码效果
这是一段红色文字的代码效果
这是一段? 链接文字的代码效果
红色提醒框
绿色提醒框
浅色提醒框
紫色提醒框
资源介绍文章介绍内容
代码使用方法
步骤一：在functions.php中添加按钮代码，添加按钮代码的方法自行查看之前发布的文章。
[b2_insert_post id=”77″]
相关按钮代码如下，自行取舍你需要的按钮代码，并不一定要全部复制。代码放置位置参考上方的相关文章自行了解
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'blackfont', '黑色文字', '<span class="blackfont">','</span>');
QTags.addButton( 'bluefont', '蓝色文字', '<span class="bluefont">','</span>' );
QTags.addButton( 'redfont', '红色文字', '<span class="redfont">','</span>' );
QTags.addButton( 'linkfont', '链接文字', '<span class="linkfont">? ','</span>' );
QTags.addButton( 'tipqian', '浅色提醒', '<span id="tip-qian">','</span>' );
QTags.addButton( 'tiphong', '红色提醒', '<span id="tip-hong">','</span>' );
QTags.addButton( 'tiplv', '绿色提醒', '<span id="tip-lv">','</span>' );
QTags.addButton( 'tipzi', '紫色提醒', '<span id="tip-zi">','</span>' );
QTags.addButton( 'tipjianjie', '文章介绍', '<span id="diy-tip-jieshao"><span id="tip-title">资源介绍</span><span id="tip-content">资源内容</span></span>' );
</script>
<?php
}
相关样式代码如下，自行取舍你需要的代码。样式代码放到style.css中即可，自己做好注释，方便后续查找
/*黑色文字*/
.blackfont {
color: #ffffff;
padding: 2px 5px;
background-color: #222528eb;
border-radius: 3px;
font-size: 14px;
margin: 0 3px;
font-weight: 600;
}
/*蓝色文字*/
.bluefont {
color: #4c4cff;
padding: 2px 5px;
background-color: #0000FF26;
border-radius: 3px;
font-size: 14px;
margin: 0 3px;
font-weight: 600;
}
/*链接文字*/
.linkfont {
color: #4c4cff;
padding: 2px 5px;
background-color: #0000FF26;
border-radius: 3px;
font-size: 14px;
margin: 0 3px;
font-weight: 600;
transition: all .4s ease-out;
}
.linkfont:hover {
background-color: #0000ff80;
transition: all .4s ease-out;
}
.linkfont:hover a {
color: #f4f4f4 !important;
transition: all .4s ease-out;
}
/*红色文字*/
.redfont {
color: #ffffff;
padding: 2px 5px;
background-color: #f71a12d4;
border-radius: 3px;
font-size: 14px;
margin: 0 3px;
font-weight: 600;
}
/* 浅色提醒 */
#tip-qian {
background-color: #FFDEE9;
background-image: linear-gradient(0deg, #ffdee9c4 0%, #b5fffc8f 100%);
padding: 10px;
border-radius: 3px;
display: inline-block;
margin: 0px 0 10px 0;
}
/* 红色提醒 */
#tip-hong {
background-color: #ff9a8b66;
background-image: linear-gradient(220deg, #FF9A8B 0%, #ff6a8838 55%, #FF99AC 100%);
padding: 10px;
border-radius: 3px;
display: inline-block;
margin: 0px 0 10px 0;
}
/* 绿色提醒 */
#tip-lv {
color: #eeeeee;
/* 绿色提醒的文字颜色 */
box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
background-image: linear-gradient(102deg, rgba(68, 110, 92, 1) 17.4%, rgba(107, 156, 120, 1) 49.3%, rgba(154, 183, 130, 1) 83.4%, rgba(247, 237, 191, 1) 110.3%);
padding: 10px;
border-radius: 3px;
display: inline-block;
margin: 0px 0 10px 0;
}
/* 紫色提醒 */
#tip-zi {
color: #ffffff;
box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(95, 117, 227, 1) 0%, rgba(188, 167, 205, 1) 90%);
padding: 10px;
border-radius: 3px;
display: inline-block;
margin: 0px 0 10px 0;
}
/*文章简介介绍专用*/
#diy-tip-jieshao {
background-color: #FFDEE9;
background-image: linear-gradient(344deg, #ffdee9c4 0%, #17cd688f 100%);
color: #393535;
overflow: hidden;
border-radius: 3px;
padding: 8px 15px;
box-shadow: 6px 0 6px -1px rgba(0, 0, 0, 0.1), -6px 0 6px -1px rgba(0, 0, 0, 0.1);
width: 100%;
height: auto;
display: flex;
flex-direction: column;
}
#tip-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
#tip-content {
text-indent: 18px;
}
