2007-10-10

分享代码（CSS+Javascript实现圆角矩形)

关键字: js
最近做一个购物站点，页面前需要圆角矩形效果, 而我不想使用背景图来实现，大概我不是美工的原因， 所以就采用 javascript+css方式

至于原理，我想大家都知道，就是用一象素高的长短不一的元素叠出圆角效果来

你的眼睛欺骗了你的心

在写自己的实现前，我知道以下两个实现圆角矩形的库

Rico Round： http://openrico.org/demos?demo=effect_round

但是它依赖于rico的core等东东，不能独立使用，而我的项目中主要使用其他的js库（mootools)，不想因此引入rico

还有一个是

Nifty Corners Cube: www.html.it/articoli/niftycube/index.html

其实它基本上能满足我的要求： 独立的完整的实现，不依赖于其他库， 使用也很方便。而且具有丰富的demo可以参考

但是它的代码占用了太多的顶层名字空间（我碰到了名字冲突），而且代码风格似乎不大好（55555，别给我扔鸡蛋）

所以我就写了自己的实现，其“工作代码”，基本上是 参考 Nifty Corners Cube

虽然重写了所有的代码（只有二百多行）， 但“灵魂”来源于 Nifty Corners Cube,  我仅仅做了重构的工作，并且使用的CSS也是直接来源于它，所以js的名称还是 Nifty。

demo 全部来自于 Nifty Corners Cube

希望对大家有点帮助
  • nifty.rar (16.7 KB)
  • 描述:
  • 下载次数: 177
评论
achun 2008-03-30
建议大家不要在这上面费力气了，只要耐心的等一段时间，相信主流的浏览器就会支持了。
bencode 2008-03-14
引用
笨笨狗 16 天前
靠一堆无用的div来生成圆角，得不偿失
还不如用canvas来画，mootools就有现成的例子


所以要用js 帮助生成 css 和 相关标签.
lumin 2008-03-05
ie 小可以用滤镜来做，WEB迅雷就是用滤镜做的圆角！
lumin 2008-03-05 
<style type="text/css">
.border1{border-top:1px solid #000; font-size:0px;line-height:0px; height:0px;margin:0px 2px 0px 2px;}
.border2{border:1px solid #000; border-width:0px 1px 0px 1px;margin:0px 1px 0px 1px; font-size:0px;line-height:0px; height:1px;}
.border3{border:1px solid #000; border-width:0px 1px 0px 1px; overflow:hidden}
</style>
<div>
<div class="border1"></div>
<div class="border2"></div>
<div class="border3">这是个圆角矩形</div>
<div class="border2"></div>
<div class="border1"></div>
<div>
笨笨狗 2008-02-27
靠一堆无用的div来生成圆角，得不偿失
还不如用canvas来画，mootools就有现成的例子
linux.sir 2008-02-27
感觉相当不错!
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

bencode
  • 浏览: 30624 次
  • 性别: Icon_minigender_1
  • 来自: 浙江台州
  • 详细资料
搜索本博客
存档
最新评论