您的位置：首页 > Web前端 > CSS

CSS实例(八)：不用图片实现宽度、高度自定的圆角矩形

2013-08-19 22:14 841 查看

根据google的analytics界面分析整理，个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观，但是可以随意设置圆角矩形的宽度及高度，很灵活。

　　不知为什么google用了b元素，有点奇怪。

　　页面源码：

Html代码

<!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">
    html,body{
        font-size:12px;
    }
    .round_border,.round_border b{
        display:block;
        text-align:center;
    }
    .round_border_layer3,.round_border_layer2,.round_border_layer1,
    .round_border_content{
        border:1px solid #c4c4c4;
        border-width:0 1px 0 1px;
        height:1px;
        overflow:hidden;
    }
    .round_border_layer3{
        margin:0 3px;
        background:#c4c4c4;
    }
    .round_border_layer2{
        margin:0 2px;
    }
    .round_border_layer1{
        margin:0 1px;
    }
    .round_border_content{
        height:300px;
        padding:3px 6px;
    }
    /*only for better appearance, not necessary, http://wallimn.iteye.com*/
    .round_border_layer2,.round_border_layer1{
        border-color:#d3d4d5;
    }
    /*******************control bar**********************/
    .controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
    .controlbar_border_content{
        background:#e9e9e9;
        height:1px;
        overflow:hidden;
    }
    .controlbar_border_layer3{
        margin:0 3px;
    }
    .controlbar_border_layer2{
        margin:0 2px;
    }
    .controlbar_border_layer1{
        margin:0 1px;
    }
    .controlbar_border_content{
        height:20px;
        padding:0 1em;
        line-height:20px;
        vertical-align:middle;
    }
    /*only for better appearance, not necessary, http://wallimn.iteye.com*/
    .controlbar_border_layer1,..controlbar_border_layer2{
        border-color:#f2f2f2;
    }
</style>
</head>
<body>
    <div style="width:260px;">
        <b class="round_border">
            <b class="round_border_layer3"></b>
            <b class="round_border_layer2"></b>
            <b class="round_border_layer1"></b>
        </b>
        <div class="round_border_content">
            <b class="round_border">
                <b class="controlbar_border_layer3"></b>
                <b class="controlbar_border_layer2"></b>
                <b class="controlbar_border_layer1"></b>
            </b>
            <div class="controlbar_border_content">
                隔壁CSS
            </div>
            <b class="round_border">
                <b class="controlbar_border_layer1"></b>
                <b class="controlbar_border_layer2"></b>
                <b class="controlbar_border_layer3"></b>
            </b>
        </div>
        <b class="round_border">
            <b class="round_border_layer1"></b>
            <b class="round_border_layer2"></b>
            <b class="round_border_layer3"></b>
        </b>
    </div>
</body>
</html>

　　效果（编辑调试浏览器IE7）：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航