javaScript圆角

我的菜你在那里 2011-09-01 05:45:56

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INDEX</title>
<script type="text/javascript" src="curvycorners.js"></script>
<style type="text/css" />
.my{
width:650px;
height:35px;

background:#666666;
border:1px solid 666666;
//*圆角属性
-webkit-border-radius: 6px;
-moz-border-radius: 6px;

}
</style>
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6},
tr: { radius:6 },
bl: { radius: 6 },
br: { radius:6 },
antiAlias: true
}
curvyCorners(setting, ".my");
curvyCorners(setting, ".my");
curvyCorners(setting, ".my");
curvyCorners(setting, ".my");

}
</script>

</head>
<body>

<div class="my">
HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML标准自1999年12月发布的 HTML 4.01后，后继的HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG）的组织，他们重新拣起 HTML 5。第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。
</div>
</body>
</html>

不用图片实现圆角，不足上下四角有毛边

...全文

90 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

jayrao5566 2011-09-02

打赏
举报

http://www.cnblogs.com/hcbin/archive/2010/03/19/1690215.html
引用这个JS就可以自动生成圆角

ccqqccqqqq 2011-09-02

打赏
举报

是啊圆角现在用css3就可以直接实现了嘛真是的

BLUE_LG 2011-09-02

打赏
举报



<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: #FFF} 

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> 

1 

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> 

</div> 

</body> 

</html>