View Code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
.circleBox
{
font-size: 12px;
margin-top: 80px;
}
.containerBox
{
margin: 0 auto;
width: 400px;
}
.circleBox span
{
height: 1px;
font-size: 1px;
display: block;
}
.content
{
height: 180px;
position: relative;
}
.s1, .s8
{
margin: 0 5px;
}
.s2, .s7
{
margin: 0 3px;
border-left: solid 2px;
border-right: solid 2px;
}
.s3, .s6
{
margin: 0 2px;
border-left: solid 1px;
border-right: solid 1px;
}
.s4, .s5
{
margin: 0 1px;
border-left: solid 1px;
border-right: solid 1px;
}
.content h4
{
color: #036;
font-size: 18px;
padding: 4px;
}
.content p
{
line-height: 160%;
font-size: 12px;
border-top: dotted 1px #d00;
padding: 4px;
}
/*定义样式*/.boxStyle .content
{
border-left: solid 1px #4B5805;
border-right: solid 1px #4B5805;
}
.boxStyle span
{
border-color: #4B5805;
}
.boxStyle .s1, .boxStyle .s8
{
background: #4B5805;
}
.boxStyle .content, .boxStyle .s2, .boxStyle .s3, .boxStyle .s4, .boxStyle .s5, .boxStyle .s6, .boxStyle .s7
{
background: #BFDEA0;
}
</style>
</head>
<body>
<div class="circleBox">
<div class="containerBox boxStyle">
<span class="s1"></span><span class="s2"></span><span class="s3"></span><span class="s4">
</span>
<div class="content">
<h4>
标题</h4>
<p>
内容,放在圆角矩形中</p>
</div>
<span class="s5"></span><span class="s6"></span><span class="s7"></span><span class="s8">
</span>
</div>
</div>
</body>