推荐一个圆角框的生成网站

Popularity: 31%,  Web Develop, 技术探讨Tech

  不少人都有认为web2.0很明显的一个视觉刻痕就是大量圆角框的使用。呵呵,也支持这种说法吧,怎么说在做页面时候适当的使用一些圆角框,能够得到漂亮视觉效果。

  如果你像我一样有时候很懒,那么有一个简单易行的方法得到漂亮完美的圆角框。就是Neurotic提供的在线圆角框生成器。生成的页面效果如下图所示:

  只要先填写好你要的background和square颜色,然后就自动生成了五张小图片分别为四角和活动门的背景。

  生成之后,把五张小图片保存到本地,然后就写到CSS和HTML文件中就可以了。

  这是CSS文件


/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

  这是CSS文件

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis
ornare ultricies libero. Donec
fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta
magna libero sed libero. Mauris sed leo.
Aliquam aliquam. Maecenas vestibulum.


Related Posts

Comments So Far: None
  • :em00:我顶
  • :em02:
  • :em03:嘿嘿
  • :em04:拍砖
  • :em01:不行
  • :em05:兴奋
  • :em06:撞墙
  • :em07:好困
  • :em08:耶!
  • :em09:不嘛
  • :em10:
  • :em11:
  • :em12:最爱
  • :em13:变!
  • :em15:我晃
  • :em14:得意
  • :em16:不知道
  • :em17:杀你
  • :em18:陶醉
  • :em19:给我醒醒
  • :em20:谁?
  • :em21:再见了
  • :em22:走咯
  • Leon , what's going on ?

    {我喜欢我四岁的时候怀疑一切的眼光}

    标签云

  • 最新评论

    • Eric: 感兴趣的话,我们可以交流下,我在...
    • Julia: 啊!这个好看……我也要…… 审美...
    • xixi: 你还真是安静……中午吃饭的时候忽...
    • Viv: 那个还曾经是冰岩人的集体消遣....在...
    • Viv: 那个还是冰岩人很长一段时间内的集...
    • triStoneL: 不错不错.....
    • triStoneL: 买卖奴隶... 被包子bs了.....
    • aw: aw,这个每天还是穿着hustonline6周年纪...
    • aw: swf嵌入中文字体的解决方案在air会给...
    • aw: 哈哈 aw 看见了~~ 没事儿没事儿,我是...
  • Sponsored Link