<head>
<style type="text/css">
a.top:link {font-family: 宋体} /*链接字体*/
a.top:link {font-weight: normal} /*设置链接文字中的字符粗细*/
a.top:link {font-size: 12} /*设置链接文字的大小*/
a.top:link {text-decoration: none} /*设置链接文字没有下划线*/
a.top:hover {text-decoration: underline} /*鼠标放在链接上时有下划线*/
a.top:link {color: #000000} /*设置链接文字的颜色*/
a.top:visited {color: #000000} /*访问过的链接*/
a.top:hover {color: #B50000} /*鼠标放在链接上字体的颜色*/
a.tj:link {font-family: 宋体}
a.tj:link {font-weight: normal}
a.tj:link {font-size: 12}
a.tj:link {text-decoration: none}
a.tj:hover {text-decoration: none}
a.tj:link {color: #000000}
a.tj:visited {color: #0000ff}
a.tj:hover {background: #FFFFCC}
h1 {font-size:12px}
h1 {font-family: "宋体"}
h1 {font-weight: normal}
h1 {color: #000000}
h2 {font-size:14px}
h2 {font-family: "宋体"}
h2 {font-weight: normal}
h2 {color: #000000}
h3 {font-size:24px}
h3 {font-weight: 1}
h3 {color: #000000}
body {
margin-top: 1px /*上边距*/
margin-bottom: 1px /*下边距*/
}
</style>
<meta http-equiv="Content-Type" content="text/html charset=gb2312"></head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><b><a href="default.asp" target="_blank" class="top">电脑对怀孕其实没啥影响</a></b></p>
<p><b><a href="default.asp" target="_blank" class="tj">电脑对怀孕其实没啥影响</a></b></p>
<h1>电脑对怀孕其实没啥影响</h1>
<h2>电脑对怀孕其实没啥影响</h2>
<h3>电脑对怀孕其实没啥影响</h3>
</body>
</html>
样式1:简洁型css圆角矩形css代码:.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:blockoverflow:hidden}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999border-right:1px solid #999}
.b1,.b1b{margin:0 5pxbackground:#999}
.b2,.b2b{margin:0 3pxborder-width:2px}
.b3,.b3b{margin:0 2px}
.b4,.b4b{height:2pxmargin:0 1px}
.d1{background:#F7F8F9}页面代码:<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
<font style="font-size:26pxcolor:redmargin:0px 10px">简洁型css圆角矩形</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>样式2:3D效果css圆角矩形css代码:.raised{background:transparentwidth:40%}
.raised h1,.raised p{margin:0 10px}
.raised h1{font-size:2emcolor:#fff}
.raised p{padding-bottom:0.5em}
.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:blockoverflow:hiddenfont-size:1px}
.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px}
.raised .b2{background:#cccborder-left:1px solid #fffborder-right:1px solid #eee}
.raised .b3{background:#cccborder-left:1px solid #fffborder-right:1px solid #ddd}
.raised .b4{background:#cccborder-left:1px solid #fffborder-right:1px solid #aaa}
.raised .b4b{background:#cccborder-left:1px solid #eeeborder-right:1px solid #999}
.raised .b3b{background:#cccborder-left:1px solid #dddborder-right:1px solid #999}
.raised .b2b{background:#cccborder-left:1px solid #aaaborder-right:1px solid #999}
.raised .b1{margin:0 5pxbackground:#fff}
.raised .b2, .raised .b2b{margin:0 3pxborder-width:0 2px}
.raised .b3, .raised .b3b{margin:0 2px}
.raised .b4, .raised .b4b{height:2pxmargin:0 1px}
.raised .b1b{margin:0 5pxbackground:#999}
.raised .boxcontent{display:blockbackground:#cccborder-left:1px solid #fffborder-right:1px solid #999}
页面代码:<div class="raised">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>3D圆角矩形</h1>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>样式3:略带菱形的css圆角矩形css代码:.curved {
background:transparent
width:40%
}
.curved h1, .curved p {
margin:0 10px
}
.curved h1 {
font-size:2em
color:#fff
}
.curved p {
padding-bottom:0.5em
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
display:block
overflow:hidden
height:1px
font-size:1px
}
.curved .b2, .curved .b3, .curved .b4 {
background:#e0cea3
border-left:1px solid #fff
border-right:1px solid #fff
}
.curved .b1 {
margin:0 4px
background:#fff
}
.curved .b2 {
margin:0 4px
height:2px
}
.curved .b3 {
margin:0 3px
}
.curved .b4 {
margin:0
height:1px
border-width:0 3px 0 3px
}
.curved .boxcontent {
display:block
background:#e0cea3
border:0 solid #fff
border-width:0 1px
}页面代码:<div class="curved">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>略带菱形的css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>样式4 特殊css圆角矩形 css代码:.pillar {
background:transparent
width:40%
}
.pillar h1, .pillar p {
margin:0 10px
}
.pillar h1 {
font-size:2em
color:#fff
}
.pillar p {
padding-bottom:0.5em
}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
display:block
overflow:hidden
font-size:1px
}
.pillar .b1, .pillar .b2, .pillar .b4 {
height:1px
}
.pillar .b2, .pillar .b3 {
background:#d66
border-left:1px solid #fff
border-right:1px solid #fff
}
.pillar .b4 {
background:#d66
border-left:4px solid #fff
border-right:4px solid #fff
}
.pillar .b1 {
margin:0 2px
background:#fff
}
.pillar .b2 {
margin:0 1px
border-width:0 1px
}
.pillar .b3 {
height:2px
margin:0
}
.pillar .b4 {
margin:0 2px
}
.pillar .boxcontent {
display:block
background:#d66
border-left:1px solid #fff
border-right:1px solid #fff
margin:0 5px
}页面代码:<div class="pillar">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
<div class="boxcontent">
<h1>特殊css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>样式5 :反向css圆角矩形css代码:.serif {
background: transparentwidth:40%
}
.serif h1, .serif p {
margin:0 10px
}
.serif h1 {
font-size:2emcolor:#fff
}
.serif p {
padding-bottom:0.5em
}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {
display:block
overflow:hidden
font-size:1px
}
.serif .b1, .serif .b2, .serif .b3 {
height:1px
}
.serif .b2, .serif .b3 {
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
}
.serif .b4 {
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
}
.serif .b1 {
margin:0background:#fff
}
.serif .b2 {
margin:0 1px
border-width:0 2px
}
.serif .b3 {
margin:0 3px
}
.serif .b4 {
height:2px
margin:0 4px
}
.serif .boxcontent {
display:block
background:#fc0
border-left:1px solid #fff
border-right:1px solid #fff
margin:0 5px
}页面代码:<div class="serif">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>反向css圆角矩形</h1>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>