带圆角的div-IT家园

摘要

为什么要做圆角的div: 圆角div平滑美观,某些情况下有比较不错的效果。比如说要做一个报message的消息框,那么动态的生成一个圆角div则很有意义

往往我们一些网站当看到圆角的DIV，这样的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=utf-8" />
<title>zxzx</title>
<style type="text/css">
#sash_left { width:430px; }
.b1, .b2, .b3, .b4 { font-size:1px; overflow:hidden; display:block; }
.b1 { height:1px; background:#AAA; margin:0 5px; }
.b2 { height:1px; background:#E0E0E0; border-right:2px solid #AAA; border-left:2px solid #AAA; margin:0 3px; }
.b3 { height:1px; background:#E3E3E3; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 2px; }
.b4 { height:2px; background:#E6E6E6; border-right:1px solid #AAA; border-left:1px solid #AAA; margin:0 1px; }
.contentb { height:186px; background:#E9E9E9; border-right:1px solid #AAA; border-left:1px solid #AAA; }
</style>
</head>
<body>
<div id="sash_left">we
    <b class="b1"></b>
    <b class="b2"></b>
        <b class="b3"></b>
        <b class="b4"></b>
    <div class="contentb">ssaasas</div>
    <b class="b4"></b>
        <b class="b3"></b>
        <b class="b2"></b>
        <b class="b1"></b>
</div>
</body>
</html>

网友最新评论 (0)