锁定老帖子 主题:关于圆角的问题,谁有更好的方式?
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-07-28
现在越来越多的网站喜欢上了圆角,css3 可以很轻松的实现 ,可是IE6\7\8不支持,又不想用图片和多标签实现 ,很纠结。 网上看了很多相关的文章,比较出名的实现方式有用 border-radius.htc 和DD_roundies 可是这两个方法还是存在许多不足和bug。 用border-radius.htc 实现 则该元素或父标签要有position:relative和zindex 。为了实现个圆角加上这个真的很没必要。而且必须是4个圆角都有,没法实现只有1个、2个、3个圆角。样式和htc文件路径也是个问题,要么同目录要么样式里面用绝对路径。 DD_roundies 还稍微好些,但是bug也很明显 ,页面初始化调用DD_roundies.addRule('.className', '2px', false)后,如果窗口再resize的话 生成的圆角框好像fiexed掉了页面布局乱了。还有隐藏显示的问题,隐藏元素后发现生成的圆角框不能隐藏还依然在那。 border-radius.htc : http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser dd_roundies : http://www.dillerdesign.com/experiment/DD_roundies/
IE6\7\8下面有没有更好的方式去实现呢?还在探索...
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-07-29
切图片,然后拼起来
|
|
返回顶楼 | |
发表时间:2011-07-29
PIE,我已经用到现在的项目中,支持多种CSS3效果
https://github.com/lojjic/PIE |
|
返回顶楼 | |
发表时间:2011-08-01
doabit 写道 PIE,我已经用到现在的项目中,支持多种CSS3效果
https://github.com/lojjic/PIE 这个确实要好用些 ,不过刚刚在用的时候还是发现了问题,当父标签有背景颜色或背景图的时候就会失效,好像被父标签的背景档住了,这时要在目的标签加上relative就好了 .b { background:#fff; } .a { width:100px; height:100px; border:1px solid #000; border-radius:10px; behavior:url(PIE.htc); box-shadow:#333 1px 1px 1px; position:relative; /*这里加relative,否则好像被挡住了*/ } <div class="b"> <div class="a"></div> </div> |
|
返回顶楼 | |
发表时间:2011-08-02
还是多图片兼容性好
|
|
返回顶楼 | |
发表时间:2011-08-02
我觉得直接用css3实现就好,ie不支持就不支持,这个圆角从使用的角度上讲没什么影响。
|
|
返回顶楼 | |
发表时间:2011-08-02
依然堆图片,以求最大兼容性和最少的代码维护量,唉。该死的IE6/7/8
|
|
返回顶楼 | |
发表时间:2011-08-02
图片比较好。、
|
|
返回顶楼 | |
发表时间:2011-08-02
用Canvas画,是最好的解决方案
|
|
返回顶楼 | |
发表时间:2011-08-03
最后修改:2011-08-03
http://jquery.malsup.com/corner/
如果不希望用这个插件,可参考骑源码写法 |
|
返回顶楼 | |