以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XSL/XSLT/XSL-FO/CSS 』  (http://bbs.xml.org.cn/list.asp?boardid=8)
----  [分享]纯CSS圆角效果  (http://bbs.xml.org.cn/dispbbs.asp?boardid=8&rootid=&id=77655)

--  作者：尛尛
--  发布时间：10/4/2009 4:45:00 PM

--  [分享]纯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" content="text/html; charset=gb2312" />

<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>

--  作者：hexun831012
--  发布时间：10/4/2009 6:01:00 PM

--  
不是标准的不好
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 46.875ms