Showtime

秋思工作室

专注于初中教育教学管理及初中数学教学。

导航

当前位置:首页博客技巧 > 正文页面

终于实现CSS圆角矩形效果

2017年7月12日 本文作者:秋思 浏览:

  这两天一直就在折腾秋思工作室文章列表页面摘要部分的“阅读全文”功能,虽然昨天已经用图片实现圆角效果了,但是并不理想,而且也不是我想要的,今天继续折腾这玩意。对于不懂技术的小白来说,折腾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浏览器中均显示直角矩形。

本站文章在没有加注转载说明的情况下,均为本站原创,转载请注明来源和出处。

来自:秋思工作室 | 链接:http://www.qiusi.me/post/42.html

标签:博客  CSS  Z-Blog  

本文引用地址

Gravatar Icon
1龙三公子 于 2017/7/19 9:34:32 发表
网址:http://www.mybabycastle.com  回复:Reply
建议还是换新版吧。我之前也不打算换的,今年初还是换了。而且连空间也换了
秋思 于 2017-7-19 21:33:06 回复
目前不打算换,没那个时间去折腾主题。

欢迎在此发表评论,但请勿发垃圾广告评论或者违反国家法律或政策的言论,谢谢合作!

欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

文章存档

标签

©2017 秋思工作室. All rights reserved. Powered by Z-Blog. Theme named Yahei and made free by Qiusi.

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可.