机器学习和生物信息学实验室联盟

标题: 圆角边框 [打印本页]

作者: zouquan    时间: 2011-11-27 20:54
标题: 圆角边框
希望下次大家做出的网页能漂亮一些,搜索框能做到下面这样最好
下面附了网上找到的代码,没实践,呼唤哪位同学实践一下,并写一个傻瓜式的文档












以下是hsc同学的实现方法[attach]275[/attach],呼唤谁来验证测试修改

以下是我从网上搜到的代码


  1. 用CSS样式,比js好
  2. 有的浏览器会禁止执行脚本,那样就无效了
  3. CSS就不会
  4. <html>
  5. <head>
  6. <title>css圆角效果</title>
  7. <meta http-equiv="content-type" content="text/html; charset=gb2312">
  8. <style type="text/css">
  9. div.RoundedCorner{background: #9BD1FA}
  10. b.rtop, b.rbottom{display:block;background: #FFFFFF}
  11. b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
  12. b.r1{margin: 0 5px}
  13. b.r2{margin: 0 3px}
  14. b.r3{margin: 0 2px}
  15. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="RoundedCorner">
  20. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  21. 无图片实现圆角框
  22. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
  23. </div>
  24. <br>
  25. <div class="RoundedCorner">
  26. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  27. <br>无图片实现圆角框<br><br>
  28. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
  29. </div>
  30. </body>
  31. </html>
  32. =================================================================
  33. 另外一种实现方式
  34. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  35. <!-- saved from url=(0046)http://longbill.cn/down/sample/roundcorner.htm -->
  36. <HTML><HEAD>
  37. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  38. <STYLE>BODY {
  39.     FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center
  40. }
  41. .round {
  42.     DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue
  43. }
  44. </STYLE>
  45. <META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
  46. <BODY>
  47. <DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
  48. <DIV
  49. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数<BR>作者</DIV></DIV>
  50. <DIV class=round id=round1>
  51. <DIV
  52. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1</DIV></DIV>
  53. <DIV class=round id=round2>
  54. <DIV
  55. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2</DIV></DIV><BR>
  56. <DIV class=round id=round3>
  57. <DIV
  58. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3</DIV></DIV>
  59. <DIV class=round id=round4>
  60. <DIV
  61. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4</DIV></DIV>
  62. <DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
  63. <DIV
  64. style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:<BR>RoundCorner("欲圆角的元素ID"
  65. [, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV>
  66. <SCRIPT>
  67. RoundCorner("round1",1);
  68. RoundCorner("round2",2);
  69. RoundCorner("round3",3);
  70. RoundCorner("round4",4);
  71. RoundCorner("a",1);
  72. RoundCorner("title",1);
  73. function RoundCorner(obj,style)
  74. {    var r = [];
  75.     var styles = [
  76.     {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
  77.     {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"]    },
  78.     {top:["0 0 0 5px","0 0 0 3px","0 0 0 2px","0 0 0 1px","0 0 0 1px"],bottom:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px","0 5 0 0px"]},
  79.     {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]}
  80.     ]; //author: longbill.cn
  81.     if (!style || style>styles.length) style = 1;
  82.     style--;
  83.     var btop = styles[style].top,bbottom = styles[style].bottom;
  84.     obj = document.getElementById(obj);
  85.     if (!obj) return;
  86.     var HTML = obj.innerHTML;
  87.     obj.innerHTML = "";
  88.     for(var istop=1;istop>=0;istop--)
  89.     {
  90.         var topborder = document.createElement("b");
  91.         topborder.style.display = "block";
  92.         topborder.style.height = "2px";
  93.         topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
  94.         for(var i=0;i<btop.length;i++)
  95.         {
  96.             var b = document.createElement("b");
  97.             if (obj.style.backgroundColor)
  98.                 b.style.backgroundColor = obj.style.backgroundColor;
  99.             else if (obj.className)
  100.                 b.className = obj.className;
  101.             b.style.display = "block";
  102.             b.style.margin = (istop)?btop[i]:bbottom[i];
  103.             b.style.height = "1px";
  104.             b.style.overflow = "hidden";
  105.             b.style.width = "auto";
  106.             topborder.appendChild(b);
  107.         }
  108.         obj.appendChild(topborder);
  109.         if (istop) obj.innerHTML+=HTML;
  110.     }
  111. }
  112. </SCRIPT>
  113. </BODY></HTML>
  114. =================================================================
  115. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  116. <html xmlns="http://www.w3.org/1999/xhtml">
  117. <head>
  118. <title>新建网页</title>
  119. <meta http-equiv="content-type" content="text/html; charset=gb2312" />
  120. <meta http-equiv="Content-Language" content="zh-CN" />
  121. <meta name="robots" content="all" />
  122. <meta name="author" content="lybykw | www.vistathink.com" />
  123. <meta name="Copyright" content="Copyright (c) 2000-2005 www.vistathink.com" />
  124. <link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
  125. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
  126. <meta name="description" content="网页制作" />
  127. <meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制 作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />
  128. <link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
  129. <script type="text/javascript" src="/public/js/main.js"></script>
  130. <style type="text/css">
  131. <!--
  132. body {font-size:12px;}
  133. .round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}
  134. .round1 .tl,.round1 .tr,.round1 .bl,.round1 .br { width:5px; height:5px; overflow:hidden; position:absolute; background:url(http://cn.yimg.com/i/ks/060928/bgcorn.gif) no-repeat;}
  135. .round1 .tl { left:-1px; top:-1px; _top:0;}
  136. .round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}
  137. .round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}
  138. .round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}
  139. .ovt ul { margin:0; padding:0; }
  140. .ovt li {background:url(http://cn.yimg.com/i/ks/060928/br.gif) right no-repeat; height:22px; line-height:22px; list-style:none; float:left; color:#088;}
  141. .ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}
  142. -->
  143. </style>
  144. <script language="javascript">
  145. <!--
  146. //-->
  147. </script>
  148. </head>
  149. <body>
  150. <br><br><br><br><br>
  151. <div class="p100">
  152. <div class="round1">
  153. <div class="tl"></div>
  154. <div class="tr"></div>
  155. <div class="bl"></div>
  156. <div class="br"></div>
  157. <div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
  158. <ul class="ovt">
  159. <li><span><img name="" src="" width="1" height="22" align="absmiddle" />
  160. <img src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识                 </span></li>
  161. </ul>
  162. </div>
  163.    <div style="padding:10px;">通过下列链接访问参考资料,可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
  164. </div>
  165. </div>
  166. </body>
  167. </html>
复制代码

作者: hsc    时间: 2011-11-28 09:14
本帖最后由 hsc 于 2011-11-28 10:10 编辑

大部分都是图片实现的,然后还有是固定的画出颜色,但是CSS3好像是支持圆角的,但是IE不支持CSS3,只有几个浏览器是支持的~
作者: zouquan    时间: 2011-12-2 20:13
还有,table中的圆角是怎么实现的呢?
http://ir.hit.edu.cn/
http://diana.cslab.ece.ntua.gr/?sec=software

这两个网站,我用IE打开也一样有圆角。
他们是用了图片么?如果是图片,那添加内容后,table能自动变大且保持圆角么?

还有,我们实验室的网站也是圆角,可是我发的帖子中的table如何变成圆角呢?见http://datamining.xmu.edu.cn/main/?page_id=86

作者: tangzk    时间: 2011-12-3 09:03
zouquan 发表于 2011-12-2 20:13
还有,table中的圆角是怎么实现的呢?
http://ir.hit.edu.cn/
http://diana.cslab.ece.ntua.gr/?sec=soft ...

经查证,两网站使用图片实现圆角边框,如下图所示:
[attach]294[/attach]
图片来源分别是:
http://ir.hit.edu.cn/themes/clean/boxstyles/img/topLeft.gif
http://diana.cslab.ece.ntua.gr/images/box/box_01.png
可能是因为WordPress中的文章一般不独立排版样式,所以文章中的表格就是普通样式的表格了。
作者: hsc    时间: 2011-12-3 20:20
我查过他们的源代码,整个是利用table布局,然后是对于每一个单元格设定背景图片,至于变大变小,我想是不是直接让图片铺满整个背景,然后会随着单元格的变大和变小而改变呢,这个回头再搞一下,看看是什么原因?




欢迎光临 机器学习和生物信息学实验室联盟 (http://123.57.240.48/) Powered by Discuz! X3.2