圆角边框

zouquan · 发表于 2011-11-27 20:54:33

希望下次大家做出的网页能漂亮一些，搜索框能做到下面这样最好
下面附了网上找到的代码，没实践，呼唤哪位同学实践一下，并写一个傻瓜式的文档

以下是hsc同学的实现方法，呼唤谁来验证测试修改

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

用CSS样式，比js好
有的浏览器会禁止执行脚本，那样就无效了
CSS就不会
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
=================================================================
另外一种实现方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>BODY {
FONT-SIZE: 12px; COLOR: #333333; TEXT-ALIGN: center
}
.round {
DISPLAY: inline; MARGIN: 5px; WIDTH: 200px; BACKGROUND-COLOR: lightblue
}
</STYLE>
<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY>
<DIV id=title style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">自动圆角函数<BR>作者</DIV></DIV>
<DIV class=round id=round1>
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式1</DIV></DIV>
<DIV class=round id=round2>
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式2</DIV></DIV><BR>
<DIV class=round id=round3>
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式3</DIV></DIV>
<DIV class=round id=round4>
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">样式4</DIV></DIV>
<DIV id=a style="MARGIN: 5px; WIDTH: 500px; BACKGROUND-COLOR: #e9afdf">
<DIV
style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px">说明:<BR>RoundCorner("欲圆角的元素ID"
[, 圆角样式 ]);<BR>圆角样式:可选参数,暂时有4种 </DIV></DIV>
<SCRIPT>
RoundCorner("round1",1);
RoundCorner("round2",2);
RoundCorner("round3",3);
RoundCorner("round4",4);
RoundCorner("a",1);
RoundCorner("title",1);
function RoundCorner(obj,style)
{ var r = [];
var styles = [
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]},
{top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0px","0px","0px","0px","0px"] },
{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"]},
{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"]}
]; //author: longbill.cn
if (!style || style>styles.length) style = 1;
style--;
var btop = styles[style].top,bbottom = styles[style].bottom;
obj = document.getElementById(obj);
if (!obj) return;
var HTML = obj.innerHTML;
obj.innerHTML = "";
for(var istop=1;istop>=0;istop--)
{
var topborder = document.createElement("b");
topborder.style.display = "block";
topborder.style.height = "2px";
topborder.style.backgroundColor = (obj.parentNode.style.backgroundColor)?obj.parentNode.style.backgroundColor:"#FFFFFF";
for(var i=0;i<btop.length;i++)
{
var b = document.createElement("b");
if (obj.style.backgroundColor)
b.style.backgroundColor = obj.style.backgroundColor;
else if (obj.className)
b.className = obj.className;
b.style.display = "block";
b.style.margin = (istop)?btop[i]:bbottom[i];
b.style.height = "1px";
b.style.overflow = "hidden";
b.style.width = "auto";
topborder.appendChild(b);
}
obj.appendChild(topborder);
if (istop) obj.innerHTML+=HTML;
}
}
</SCRIPT>
</BODY></HTML>
=================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | www.vistathink.com" />
<meta name="Copyright" content="Copyright (c) 2000-2005 www.vistathink.com" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页制作" />
<meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script type="text/javascript" src="/public/js/main.js"></script>
<style type="text/css">
<!--
body {font-size:12px;}
.round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}
.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;}
.round1 .tl { left:-1px; top:-1px; _top:0;}
.round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}
.round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}
.round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}
.ovt ul { margin:0; padding:0; }
.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;}
.ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}
-->
</style>
<script language="javascript">
<!--
//-->
</script>
</head>
<body>
<br><br><br><br><br>
<div class="p100">
<div class="round1">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
<div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
<ul class="ovt">
<li><span><img name="" src="" width="1" height="22" align="absmiddle" />
<img src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识 </span></li>
</ul>
</div>
<div style="padding:10px;">通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
</div>
</div>
</body>
</html>

复制代码

hsc · 发表于 2011-11-28 09:14:05

本帖最后由 hsc 于 2011-11-28 10:10 编辑

大部分都是图片实现的，然后还有是固定的画出颜色，但是CSS3好像是支持圆角的，但是IE不支持CSS3，只有几个浏览器是支持的~

zouquan · 发表于 2011-12-2 20:13:43

还有，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:21

zouquan 发表于 2011-12-2 20:13
还有，table中的圆角是怎么实现的呢？
http://ir.hit.edu.cn/
http://diana.cslab.ece.ntua.gr/?sec=soft ...

经查证，两网站使用图片实现圆角边框，如下图所示：

图片来源分别是：
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:23

我查过他们的源代码，整个是利用table布局，然后是对于每一个单元格设定背景图片，至于变大变小，我想是不是直接让图片铺满整个背景，然后会随着单元格的变大和变小而改变呢，这个回头再搞一下，看看是什么原因？

		自动登录	找回密码
密码			注册

圆角边框

本帖子中包含更多资源

本帖子中包含更多资源