发新话题
打印

纯CSS圆角效果

纯CSS圆角效果

<!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" c />

<title>无标题文档</title>

<style>

/*********** 圆角Box层 ***********/

.round_box{ font-size:12px; float:left; margin:3px; }



.round_box .linea,

.round_box .lined{ height:1px; overflow:hidden; background:#B4BDD4; margin:0 2px; }

.round_box .lineb,

.round_box .linec{ height:1px; overflow:hidden; border:1px solid #B4BDD4; border-top:0; border-bottom:0; margin:0 1px; }



.round_box .header, .round_box .body, .round_box .body .content{

       border:1px solid #B4BDD4; border-top:0; border-bottom:0; background:#EEF4FB; overflow:hidden;

}



.round_box .body .content table.list{ width:100%; table-layout:fixed; border-collapse:collapse; }

.round_box .body .content table.list td{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.round_box .body .content table.list td a{ text-decoration:none; color:#444; }

.round_box .body .content table.list td a:hover{ color:#000; }



.round_box .header{ height:30px; }

.round_box .header .title{ font-weight:bold; padding:8px 0 0 10px; float:left; }

.round_box .header .more{ float:right; padding:9px 10px 0 0; }

.round_box .header .more a{ text-decoration:none; color:#545D74}



.round_box .body{ padding:0 7px 7px 7px; }

.round_box .body .content{ background:#fff; padding:5px 2px 0 5px; }

</style>

</head>



<body style="width:700px">





<div class="round_box" style="width:100px;"><div class="linea"></div><div class="lineb"></div>

       <div class="header">

            <div class="title">标题</div>

       </div>



       <div class="body"><div class="linea"></div><div class="lineb"></div>

            <div class="content">

            

                     a<br /><br /><br /><br /><br />



            </div><div class="linec"></div><div class="lined"></div>

       </div><div class="linec"></div><div class="lined"></div>

</div>

</body>

</html>
出处:http://hi.baidu.com/lvzei
站长必备www.biweb.cn
建站利器www.biweb.cn
站长装备www.biweb.cn

TOP

发新话题