用CSS实现圆角框

转载 2006年05月19日 14:42:00

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
div.rtop, div.rbottom{display:block;background: #FFF}
div.rtop div, div.rbottom div{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
div.r1{margin: 0 5px}
div.r2{margin: 0 3px}
div.r3{margin: 0 2px}
div.rtop div.r4, div.rbottom div.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<br/>无图片实现圆角框<br/><br/>
<div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</html>

纯CSS制作圆角矩形框知识总结

在制作后台登录页的时候,需要从网页上面把那个圆角矩形框选取下来,然后通过Photoshop进行切割,在进行设置,最后得到需要的登录框的圆角矩形框。如下图。     但是登录最新的智囊团的那个...
  • u013047684
  • u013047684
  • 2015年08月23日 21:33
  • 1316

css实现圆角框

 .xtop, .xbottom {display:block;background: transparent; font-size:1px;}.xb1, .xb2, .xb3, .xb4 {disp...
  • zzcbyl
  • zzcbyl
  • 2010年08月06日 18:32
  • 278

CSS3 border-radius实现边框圆角

border-radius实现边框圆角   这是css3的属性 border-radius:3px; -webkit-border-radius:3px; -moz-border-radius...
  • wangnanwlw
  • wangnanwlw
  • 2016年08月09日 14:48
  • 884

尝试在ie8上实现纯css的圆角

纯css实现在ie8下的圆角 本文可以说几乎没有什么
  • ljx1044680698
  • ljx1044680698
  • 2014年11月25日 00:05
  • 3172

用CSS实现无图片圆角框

做圆角框比较常见的做法是切割图片法。这样可以产生随心所欲的效果。但是如果要求比较简单,没有时间来割图,是否有更简单的方法呢?答案是肯定的。我们可以用css来达到一定效果。这种方法优点是速度快,而且随时...
  • snleo
  • snleo
  • 2006年06月23日 17:28
  • 2362

IE7/IE8实现css圆角效果

HTML代码:         赵幸培 css代码: *{ margin:0; padding:0; } .zxp{ width:100px; height:100px; line-h...
  • zx_p24
  • zx_p24
  • 2016年10月11日 16:24
  • 2419

CSS无图片实现圆角框

原文:http://hztv.com.ru/?action=show&id=738style type="text/css">div.RoundedCorner{background: #9BD1FA...
  • qsdnet
  • qsdnet
  • 2007年04月21日 23:59
  • 522

css无图片实现圆角框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 div.Rou...
  • xinrui2009
  • xinrui2009
  • 2009年06月02日 15:31
  • 255

纯CSS实现圆角框

原文链接:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html 纯CSS实现圆角框是一件大家都说烂了的事件,我也写过两篇总结...
  • u010874036
  • u010874036
  • 2016年04月05日 21:42
  • 275

CSS实现自适应圆角矩阵——滑动门

css圆角矩形对于很多人来说,都觉得很难.在table中要实现圆角矩形我想很多人都会,而在css中要定义圆角矩形也并不难,不过要一个宽度不固定的框,事情变得有些复杂了。宽度不固定,就意味着这个框在水平...
  • lulalahappy123
  • lulalahappy123
  • 2015年04月18日 18:48
  • 686
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS实现圆角框
举报原因:
原因补充:

(最多只允许输入30个字)