经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › CSS做圆角，求制作讲解。

查看: 3555|回复: 4

CSS做圆角，求制作讲解。 [复制链接]

djw19860705　楼主

新手上路

帖子: 13
体力: 40
威望: 0

发表于 2007-11-6 14:44:08 |显示全部楼层

CSS做圆角，求制作讲解。谁讲一个，怎么做才最好用最简单。一种是在a{}中用的。也就是超链接后都改变背景的。一种是单一的能像很多网页中样边上的圆角。谁讲一个嘛。谢谢了。

西部数码顶级域名注册商39元抢注！

使用道具举报

cuikai　

崔凯

钻石会员 

帖子: 2932
体力: 6848
威望: 16

发表于 2007-11-6 14:48:53 |显示全部楼层

第一种

<html xmlns:v>

<head>

<style>

v\:*{behavior: url(#default#VML);}

</style>

</head>

<body>

<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#e8e8e8" Filled="T" />

刷新本页才能看到效果

</body>

</html>

======================================
第二种
css圆角效果，IE6, firefox均显示正常

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

 无图片实现圆角框 

</div>
</body>
</html>

前端开发 http://uicss.cn/fed-book/

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

marvellous　

金翅擘海

钻石会员

帖子: 16559
体力: 37158
威望: 143

发表于 2007-11-6 14:53:19 |显示全部楼层

<STYLE type=text/css>
#navigation {
 background:#99CCFF; 
 width:715px; 
 margin:0 auto; 
 height:38px; 
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}

#navigation ul {
  margin:0; 
  padding:0; 
  list-style-type:none; 
  background:transparent;
  }
#navigation li {
  display:block; 
  float:left; 
  margin:0 1px;
  }
.snazzy {
  background:transparent;
  }
.snazzy span {
	text-align:center;
	color:#fff;
	margin:0;
	font-weight: normal;
  }
.b1, .b2, .b3, .b4 {
  display:block; 
  font-size:1px;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.b1, .b2, .b3 {
  height:1px;
  }
.b2, .b3, .b4 {
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }
.b1 {
  margin:0 5px; 
  background:#fff;
  }
.b2 {
  margin:0 3px; 
  border-width:0 2px;
  }
.b3 {
  margin:0 2px;
  }
.b4 {
  height:2px; 
  margin:0 1px;
  }
  .boxcontent {
  display:block; 
  border-left:1px solid #fff; 
  border-right:1px solid #fff;
  }

a.menu, a.menu:visited {
	display:block;
	text-decoration:none;
	width:100px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
  }

a.current span, a.current:visited span {
  padding-top:10px;
  }

a.menu:hover {
  background:transparent; 
  cursor:pointer;
  }

a.current:hover {
  cursor:default;
  }

a.menu:hover span {
  padding-top:10px;
  }

.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
.lace {background:#e0e0d5;}
.slate {background:#bcdae9;}
.salmon {background:#ffa07a;}
.mint {background:#f5fffa;}

</STYLE>
</head>

<body>
<center>
<DIV id=navigation>
<UL>
<LI><A class=menu title="AccessKey: a" accessKey=a href="../menu/index.html">Demos </A></LI>
<LI><A class=menu title="AccessKey: b" accessKey=b href="../menus/index.html">Menus </A></LI>
<LI><A class="menu current" title="AccessKey: c" accessKey=c href="#nogo">Layouts </A></LI>
<LI><A class=menu title="AccessKey: d" accessKey=d href="../boxes/index.html">Boxes </A></LI>
<LI><A class=menu title="AccessKey: e" accessKey=e href="../mozilla/index.html">Mozilla </A></LI>
<LI><A class=menu title="AccessKey: f" accessKey=f href="../ie/index.html">Explorer </A></LI>
<LI><A class=menu title="AccessKey: g" accessKey=g href="../opacity/index.html">Opacity </A></LI></UL>
</DIV>

提示：您可以先修改部分代码再运行