用CSS实现圆角效果的几种方法

最新推荐文章于 2024-08-29 09:00:00 发布

zjsunshine

最新推荐文章于 2024-08-29 09:00:00 发布

阅读量705

点赞数

分类专栏： asp.net 文章标签： css class div float border generator

asp.net 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

复制内容到剪贴板

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.content{border:1px #000 solid;margin:10px 0px;}
.g{margin:-1px;height:2px;width:2px;float:left;background:#FFF;overflow:hidden;}
.p{margin:1px;height:1px;width:1px;background:#000;overflow:hidden;}
</style>
<script language="javascript">
function getByTagName(e){return document.getElementsByTagName(e);}
function creatRoutBox(){
var boxs = getByTagName("div");
for (i=0 ;i < boxs.length ;i++) {
  if ( boxs[i].className == "t") {
   boxs[i].innerHTML = '<div class="g"><div class="p"></div></div><div class="g" style="float:right;"><div class="p" style="margin:1px 1px 0px 0px;"></div></div>';
  }
  if ( boxs[i].className == "b") {
   boxs[i].innerHTML = '<div class="g"><div class="p" style="margin:0px 0px 1px 1px;"></div></div><div class="g" style="float:right;"><div class="p" style="margin:0px 1px 1px 0px;"></div></div>';
  }
}
}
</script>
</HEAD>
<BODY οnlοad="creatRoutBox()">
第一种方法:
<div class="content">
<div class="x"><div class="g"><div class="p"></div></div><div class="g" style="float:right;"><div class="p" style="margin:1px 1px 0px 0px;"></div></div></div>
<div style="clear:both;margin:10px;">用的float属性写的
原理：是用宽高等于２的box定义其magin:-1来盖住后面的大框的border，然后在box里写一个宽高为１的小box来显示出突出的点
</div>
<div class="d"><div class="g"><div class="p" style="margin:0px 0px 1px 1px;"></div></div><div class="g" style="float:right;"><div class="p" style="margin:0px 1px 1px 0px;"></div></div></div>
</div>
第二种方法：
<div style="width:300px;">
<div class="content" style="background:#e1e1e1">
<div class="t"></div>
<div style="clear:both;margin:10px;">其实和第一种方法是一样的，只是我加了个JS用来，这样在大网站调用时，比较快，一次性的下载了所有的圆解CSS，显示速度会快一点！小站也就无所谓了</div>
<div class="b"></div>
</div></div>

<p></p>
第三种方法：
<style type="text/CSS"> 
.box{background:#FFF;width: 200px;} 
.tb {display:block;background:#fff} 
.tb div {display:block;height:1px;overflow:hidden;border-left:1px solid #000;border-right:1px solid #000;font-size:1px;} 
.tb .r1{margin:0px 3px;border:0px;} 
.tb .r2 {margin:0px 2px;} 
.tb .r3 {margin:0px 1px;} 
</style> 
<div class="box"> 
    <div class="tb"> 
        <div class="r1" style="border-bottom:1px #000 solid;"></div> 
        <div class="r2"></div> 
        <div class="r3"></div> 
    </div> 
<div style="border-left:1px #000 solid;border-right:1px #000 solid;padding:10px 10px;">用了从上而下一致的box，只是定义了每一个box的margin:0 2px，这样改变数值从而达到圆角的效果，这个方法，我写了三个线来显示圆角，比上面的两个要多一个像素！<p></p></div>
  <div class="tb"> 
        <div class="r3"></div> 
        <div class="r2"></div> 
        <div class="r1" style="border-top:1px #000 solid;"></div> 
    </div> 
</div> 
<p></p>
第四种方法：
<STYLE type=text/css> 
#xsnazzy {background: transparent; } 
.xtop, .xbottom {display:block; background:transparent; font-size:1px;} 
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;height:1px;background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;} 
.xb1 {margin:0 5px; background:#08c;} 
.xb2 {margin:0 3px; border-width:0 2px;} 
.xb3 {margin:0 2px;} 
.xb4 {height:2px; margin:0 1px;} 
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;} 
</STYLE>
<DIV id=xsnazzy style=width:400px;><B class=xtop><B class=xb1></B><B class=xb2></B><B class=xb3></B><B class=xb4></B></B>
<DIV class=xboxcontent>
这种方法和第三种方法是一样的，不过这里用了五层来写圆角，这样的圆弧度比较大，而且具说是最科学的一个算法，来显示圆角！要不然google怎么也会用这么大的圆角呢，呵呵！</DIV><B class=xbottom><B class=xb4></B><B class=xb3></B><B class=xb2></B><B class=xb1></B></B></DIV>
</BODY>
</HTML>