看到很多博客中都有陌小雨右侧的这个：

陌小雨觉得很酷呢。也只需要简单的css就可以实现。

首先需要在style.css中加入下面代码：

.textwidget a{display: block;padding: 0 15px 15px;border: 1px solid #fff;}
.textwidget a h2{font-size: 20px;font-weight: normal;}
.textwidget a p{color: #999;margin-bottom: 0;}
.textwidget a strong{margin:-1px 0 0 -16px;display: inline-block;padding: 3px 15px 4px;color: #fff;font-size: 14px;font-weight: normal;}

.textwidget a.style05{color: #33BBBA;}
.textwidget a.style05:hover{border-color: #33BBBA;color: #00ABA9;}
.textwidget a.style05 strong{background-color: #33BBBA;}
.textwidget a.style05:hover strong{background-color: #00ABA9;}

然后再wordpress后台小工具增加文本小工具，输入下面代码即可：

<a class="style05" href="https://dedewp.com/online-music" target="_blank"><strong>Music</strong><h2>随心而听</h2><p>一副耳机，一首歌，一个人</p></a>

陌小雨额外挑选了几个好看的颜色，供大家选择：

.textwidget a.style01{color: #428BCA;}
.textwidget a.style01:hover{border-color: #428BCA;color: #357EBD;}
.textwidget a.style01 strong{background-color: #428BCA;}
.textwidget a.style01:hover strong{background-color: #357EBD;}

.textwidget a.style02{color: #D9534F;}
.textwidget a.style02:hover{border-color: #D9534F;color: #D33632;}
.textwidget a.style02 strong{background-color: #D9534F;}
.textwidget a.style02:hover strong{background-color: #D33632;}

.textwidget a.style03{color: #5CB85C;}
.textwidget a.style03:hover{border-color: #5CB85C;color: #4CAE4C;}
.textwidget a.style03 strong{background-color: #5CB85C;}
.textwidget a.style03:hover strong{background-color: #4CAE4C;}

.textwidget a.style04{color: #C35BFF;}
.textwidget a.style04:hover{border-color: #C35BFF;color: #B433FF;}
.textwidget a.style04 strong{background-color: #C35BFF;}
.textwidget a.style04:hover strong{background-color: #B433FF;}

怎么使用不用陌小雨教了吧！