昨天用图片实现圆角矩形效果了,但是不理想,今天继续折腾这玩意。对于不懂技术的小白来说,折腾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浏览器中均显示直角矩形。
版权声明:未加注说明的文章均为本站原创首发,转载本站文章请遵循署名-非商业用途-保持一致的原则
首发网站:秋思工作室
秋思 于 2017-7-19 21:33:06 回复目前不打算换,没那个时间去折腾主题。
欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!
欢迎参与讨论,请在这里发表您的看法、交流您的观点。