编程开发论坛 - Powered by Discuz! Board

标题: 纯CSS圆角效果 [打印本页]

作者: 尛尛 时间: 2009-10-6 08:20 标题: 纯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

欢迎光临编程开发论坛 (http://bbs.lihuasoft.net/)