秋思工作室

　　昨天用图片实现圆角矩形效果了，但是不理想，今天继续折腾这玩意。对于不懂技术的小白来说，折腾CSS、html和折腾ASP、PHP的难度没什么两样。好在经过坚持不懈的努力，今天终于实现了CSS圆角矩形效果，小小开心一下！

　　关于在模板文件中添加相应的html标签，请参考这篇文章进行设置，这里就不多说了。其实用CSS实现容器圆角效果，只需要在代码中添加border-radius属性值，详情请参考后面代码中红色加粗部分。而且现在各大主流浏览器都支持这种CSS圆角矩形效果。但是，我昨天修改好CSS文件后，列表页面摘要部分的“阅读全文”的边框并不是圆角矩形，依然还是直角矩形。我仔细检查了代码，肯定没有问题。为此，我郁闷了一天。

　　今天无意中发现，秋思工作室因为是Z-Blog系统，使用的是FCKeditor编辑器，在IE11下需要使用兼容模式才能正常使用，而CSS圆角矩形效果在IE11的兼容模式中是不显示的，需要把网址从兼容模式中删除。但是，就在我写这篇文章时，发现FCKeditor莫名其妙又不需要使用IE11的兼容模式也能正常使用了，我也是醉了。说多了都是泪，一个IE11兼容模式折腾了我两天，我已经是无力吐槽了，直接贴出我使用的代码。

.post-more {
float:right;
width:58px;
margin:0;
padding:0;
}

.post-more h3{
background:#f9f9f9;
float:left;
padding:4px 4px;
font-size:12px;
font-weight:normal;
text-align:center;
border-radius:4px;
border:1px solid #ccc;
white-space: nowrap;
}

.post-more a {
color:#c30;
}

　　说明：利用IE11的F2开发人员工具的仿真测试，本文所讲的CSS圆角矩形效果在IE11、Firefox、Chrome、Safari、Opera这五大主流浏览器下显示都很完美，但在IE9及其以下IE浏览器中均显示直角矩形。