秋思工作室

　　今天一直在研究如何给文章摘要部分添加“阅读全文”的功能。本来这个可以用插件实现的，但是插件影响博客打开的速度，直接用代码就好多了。本来不难，但是我想用CSS给“阅读全文”添加圆角矩形边框效果，这样比较美观。

　　首先在模板文件b_article-multi.html文件中添加“阅读全文”的标签，找到<div class="post-tags">这一句，在下方添加显示“阅读全文”的标签代码。使用div的目的是为了方面添加CSS属性来控制阅读全文的显示效果。

　　<div class="more"><h3><a href="<#article/url#>">more</a></h3></div>

　　然后在CSS文件中添加相应的CSS属性，相关代码如下。说明：红色部分的more也可以用其它标签，上面加粗的more请换成“阅读全文”。

.more {
background:url("Yahei/more.png");
color:#224;
float:right;
width:52px;
margin:0;
padding:4px;
}

.more h3 {
float:left;
font-size:12px;
font-weight:normal;
padding:0 2px;
}

.more a {
color:#c30;
}

　　现在大家看到的“阅读全文”的圆角矩形并不是用CSS来实现的，而是用图片来实现的。本来最初是用CSS来实现的，但是IE11下并不显示这种CSS圆角矩形的效果，所以只能先用图片来替换了。但是这样又有另一个郁闷的地方：在Firefox下，图片显示效果不受CSS控制，产生了错位。对于不懂技术的小白来说，这可真是难为了我。