快速业务通道

一个圆角框的生成网站

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26

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

   http://www.neuroticweb.com/recursos/css-rounded-box/index.php

  如果你像我一样有时候很懒,那么有一个简单易行的方法得到漂亮完美的圆角框。就是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.

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号