css圆角效果

christy_fang

浏览: 87938 次
性别:
来自: 北京

最近访客更多访客>>

wangsw15

okahns

bety

Miami-Wade

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

用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">



</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>

分享到：

css圆角效果 | js实现精确到小数点后几位的四舍五入函数

2011-11-21 10:55
浏览 1331
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论