圆角盒子 CSS+DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
/*===============圆角 div=======================*/
.br_1,.br_2,.br_3 {
FONT-SIZE: 0px;
MARGIN: 0px 1px;/*左右边界 1px*/
OVERFLOW: hidden;
HEIGHT: 1px; /*高度 1px;*/
border: 0px solid #e5ada7; /*四个顶点 颜色(边框颜色一致)*/
}
.br_1 {

BACKGROUND: #e5ada7;/*上边框颜色*/
margin-top: 0px;
margin-bottom: 0px;
margin-right: 3px;/*左右边界 3px*/
margin-left: 3px;
}
.br_2 {

    BACKGROUND: #fed6d2;/*内容颜色*/

BORDER-LEFT-WIDTH: 2px;/*边框 2px*/
BORDER-RIGHT-WIDTH: 2px;
}
.br_3 {

    BACKGROUND: #fed6d2;/*内容颜色*/
BORDER-LEFT-WIDTH: 1px;/*边框 1px*/
BORDER-RIGHT-WIDTH: 1px;
}


/*普通 box div*/
.ct_box {
BACKGROUND: #fed6d2;/*内容颜色*/
PADDING-BOTTOM: 1px;
ZOOM: 1;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;/*右边框颜色*/
border-right-color: #e5ada7;
border-left-color: #e5ada7; /*左边框颜色*/
}
/*标题*/
.ct_title {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 14px; LINE-HEIGHT: 24px; HEIGHT: 24px
}
/*内容 box*/
.ct_con_box {
PADDING-RIGHT: 5px;
PADDING-LEFT: 8px;
BACKGROUND: #fff; /*白色背景*/
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
margin-top: 0px;
margin-right: 3px; /*边框 3px*/
margin-bottom: 0px;
margin-left: 3px; /*边框 3px*/
}
/*内容 box box*/
.ct_con_box_box {
TABLE-LAYOUT: fixed; WORD-WRAP: break-word /*??*/
}
/*内容*/
.ct_con_box_box_con {
FONT-SIZE: 14px; LINE-HEIGHT: 22px;WIDTH: 90;PADDING-LEFT: 10px
}
/*===================圆角 div end======Power: juju 2010-03-04 ======================*/
-->
</style>
</head>

<body>

<DIV class="br_1"></DIV>
<DIV class="br_2"></DIV>
<DIV class="br_3"></DIV>
<DIV class="ct_box"><!--box -->
<DIV class="ct_title">最佳答案</DIV><!--标题 -->

<DIV class="ct_con_box"><!--box box 内容外框-->
<!--4 -->
<DIV class="ct_con_box_box"><!--box box box -->
<DIV class="ct_con_box_box_con"><!-- 内容 内框-->
<!-- 内容开始-->

<BR>以下两种方法几乎能解决现今所有HACK.
<BR><BR>1, !important
<BR>以下两种方法几乎能解决现今所有HACK.
<BR><BR>1, !important

<!-- 内容结束-->
</DIV><!--内容 end -->
</DIV><!--box box box end -->
</DIV><!--box box end -->
</DIV><!--box end -->
<DIV class="br_3"></DIV>
<DIV class="br_2"></DIV>
<DIV class="br_1"></DIV>

</body>
</html>

by 雪洁 2010-09-13 14:10:16 2654 views
我来说几句

相关文章