DIV+CSS简单实现圆角矩形方法汇总【附代码】

By bboncn

实现方法五：

<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”>红色黑客 </A></LI>
<LI><A class=menu title=”AccessKey: b” accessKey=b href=”../menus/index.html”>萧萧小雨 </A></LI>
<LI><A class=”menu current” title=”AccessKey: c” accessKey=c href=”#nogo”>风染深蓝 </A></LI>
<LI><A class=menu title=”AccessKey: d” accessKey=d href=”../boxes/index.html”>风中泪痕 </A></LI>
<LI><A class=menu title=”AccessKey: e” accessKey=e href=”../mozilla/index.html”>火焰楼兰 </A></LI>
<LI><A class=menu title=”AccessKey: f” accessKey=f href=”../ie/index.html”>志比天高 </A></LI>
<LI><A class=menu title=”AccessKey: g” accessKey=g href=”../opacity/index.html”>波希米亚 </A></LI></UL>
</DIV><!– end of navigation –>
<HTML xmlns:v=”urn:schemas-microsoft-com:vml” xmlns:o=”urn:schemas-microsoft-com:office:office”>
<HEAD>
<META name=”Gemeratpr” content=”FlashVml(闪耀之星)3.0″>
<META http-equiv=”Content-Type” content=”text/html;charset=gb2312″>
<META name=”KeyWords” content=”吾之画; flashvml; 闪耀之星; vml; VML; vmlflash; vml动画; 矢量; 2D; 3D; 沐缘华; FYW; 画板; 在线画图”>
<TITLE>吾之画</TITLE>
<STYLE>
v\:*{behavior:url(#default#VML);}
o\:*{behavior:url(#default#VML);}
</STYLE>
<script>
function window.onerror(){return true;} //防止您的程序出现错误时弹出提示
</script>
</HEAD>
<BODY bgcolor=”#000000″ style=’scrollbar-base-color:#1b57b4;scrollbar-shadow-color:white;scrollbar-highlight-color:white;scrollbar-arrow-color:white;’>
<bgsound loop=1 id=bgsound1>
<bgsound loop=-1 id=bgsound2>
<script>
//启动更新函数,更新所有使用隐藏功能的物件初期视图
var loadtime=null,loadtext=’if(document.readyState!=”complete”){window.status=window.status+”.”}else{clearInterval(loadtime);window.status=”"}’;
window.status=’相关图形程序图像音乐正在加载，请等待’
loadtime=setInterval(loadtext,200)
function window.onload(){
}
</script>
<v:roundrect id=vml0 style=”Z-INDEX:3002;LEFT:176;WIDTH:200;POSITION:absolute;TOP:112;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”red” stroked=”t” strokecolor=”#c63a01″ strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”dashDot”/>
<v:fill type=”gradient” opacity=”.5″ color2=”#2341b6″ angle=”0″/>
 
<script language=”VBScript”>
sub hello
document.fgColor=int(256*256*256*rnd)
end sub
</script>
<center>
人之初怜香惜玉性本善
</v:roundrect>
<v:roundrect id=vml1 style=”Z-INDEX:3002;LEFT:176;WIDTH:200;POSITION:absolute;TOP:459;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”#86f45c” stroked=”t” strokecolor=”#3a6df7″ strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”dot”/>
<v:fill type=”gradientRadial” opacity=”.5″ color2=”#11b578″/>
 
<center>
寒雨连江夜入吴， 
平明送客楚山孤。 
洛阳亲友如相问， 
一片冰心在玉壶。 
</v:roundrect>
<v:roundrect id=vml2 style=”Z-INDEX:3002;LEFT:401;WIDTH:200;POSITION:absolute;TOP:459;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”#fbb235″ stroked=”t” strokecolor=”#e92cab” strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”shortDash”/>
<v:fill type=”gradient” opacity=”.5″ color2=”#dc4fa9″ angle=”0″/>
 
<script language=”JavaScript”>
<!– Hide
function MakeArray(n){
 this.length=n;
 for(var i=1; i<=n; i++) this[i]=i-1;
 return this
}
hex=new MakeArray(16);
hex[11]=”A”; hex[12]=”B”; hex[13]=”C”; hex[14]=”D”; hex[15]=”E”; hex[16]=”F”;
function ToHex(x){
 var high=x/16;
 var s=high+”";
 s=s.substring(0,2);
 high=parseInt(s,10);
 var left=hex[high+1];
 var low=x-high*16;
 s=low+”";
 s=s.substring(0,2);
 low=parseInt(s,10);
 var right=hex[low+1];
 var string=left+”"+right;
 return string;
}
function rainbow(text){
 text=text.substring(3,text.length-4);
 color_d1=255;
 mul=color_d1/text.length;
 for(i=0;i < text.length;i++){
 color_d1=255*Math.sin(i/(text.length/3)); “255*Math.sin(i/(text.length/3))”
 color_h1=ToHex(color_d1);
 color_d2=mul*i;
 color_h2=ToHex(color_d2);
 document.write(“”+text.substring(i,i+1)+’’);
 }
}
// –>
</script>
<center>
<SCRIPT>
<!–
 {rainbow(“–>大浪淘沙方见峥嵘<!–”);}
//–>
</SCRIPT>
</v:roundrect>
<v:roundrect id=vml3 style=”Z-INDEX:3002;LEFT:627;WIDTH:200;POSITION:absolute;TOP:459;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”#fad0b9″ stroked=”t” strokecolor=”#155be4″ strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”dash”/>
<v:fill type=”gradientRadial” opacity=”.5″ color2=”#b3182d”/>
 
<SCRIPT language=JavaScript1.2>
var message=”犄角旮旯里才能见到精华”
var neonbasecolor=”#00FFFF”
var neontextcolor=”red”
var flashspeed=200 //in milliseconds
var n=0
if (document.all){
document.write(‘<a href=http://2shou.sina.com.cn/ target=_blank>’)
for (m=0;m<message.length;m++)
document.write(‘’+message.charAt(m)+’’)
document.write(‘</a>’)
//cache reference to neonlight array
var tempref=document.all.neonlight
}
else
document.write(message)
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
tempref[n].style.color=neontextcolor
if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout(“beginneon()”,1500)
return
}
}
function beginneon(){
if (document.all)
flashing=setInterval(“neon()”,flashspeed)
}
beginneon()
</SCRIPT>
</v:roundrect>
<v:roundrect id=vml4 style=”Z-INDEX:3002;LEFT:401;WIDTH:200;POSITION:absolute;TOP:112;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”#e2f314″ stroked=”t” strokecolor=”#c63a01″ strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”dashDot”/>
<v:fill type=”gradientRadial” opacity=”.5″ color2=”#13e74a”/>
 
<marquee>但愿人长久,千里共婵娟!</marquee>
</v:roundrect>
<v:roundrect id=vml5 style=”Z-INDEX:3002;LEFT:627;WIDTH:200;POSITION:absolute;TOP:112;HEIGHT:322″ arcsize=”9830f” filled=”t” fillcolor=”#f82d92″ stroked=”t” strokecolor=”#57802a” strokeweight=”1px”>
<v:stroke opacity=”1″ startarrow=”none” endarrow=”none” dashstyle=”shortDashDot”/>
<v:fill type=”gradient” opacity=”.5″ color2=”#12cce2″ angle=”0″/>
 
<center><img src=”http://bbs.blueidea.com/customavatars/Sheneyan.gif“>
 
<script>
var a=1
</script>
click me please!
</v:roundrect><SCRIPT> //以下程序快速执行使预隐藏图形及时隐藏
try{var bodyobjs=document.body.children;for(i=0;i<bodyobjs.length;i++){if(bodyobjs[i].yincang!=null)bodyobjs[i].style.display=’none’;}}catch(e){}
</SCRIPT>
<center>
<table>
<tr>
 <td style=”FILTER: glow(strength=6,color=blue) align=”center” height=54>淡然看一切心情才能淡如水，我喜欢所以我开心。</td>
</tr>
</table>
 
</BODY>
</HTML>

Pages: 1 2 3 4 5

This entry was posted on July 31, 2007 at 1:03 pm and is filed under Web design | 网站开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “DIV+CSS简单实现圆角矩形方法汇总【附代码】”

Xiaotian Says:
July 31, 2007 at 6:46 pm
这不就一个方法么……

Sunbo’s Blog