职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 621|回复: 11

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

  [复制链接]
jinchang 发表于 2011-6-20 16:49 | 显示全部楼层 |阅读模式
  根据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">  
                隔壁老王   
            </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>  

<!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">
                                隔壁老王
                        </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>


江南枫 发表于 2011-6-20 16:49 | 显示全部楼层
看不太懂!



shmilyyu 发表于 2011-6-20 16:50 | 显示全部楼层
其实就是高度1px的border拼出来的
但是不够圆滑

fl 发表于 2011-6-20 16:50 | 显示全部楼层
zhouqq 写道
看不太懂!




那个margin就是来做圆角的, 把b放在盒子里面,然后用margin:0 xpx, b的内容旧放一个空格,背景色就和内容颜色一样旧可以了

fossil 发表于 2011-6-20 16:50 | 显示全部楼层
把页面(或者把图抓下来)放大一些就看明白了。

楠楠 发表于 2011-6-20 16:51 | 显示全部楼层
楼主,我copy你的代码在浏览器里看不到效果

broken 发表于 2011-6-20 16:51 | 显示全部楼层
什么浏览器呀?我试试。

叫我小乖 发表于 2011-6-20 16:51 | 显示全部楼层
我用IE7、FF、Chrome都试了一下,可以呀。

有烟没火 发表于 2011-6-20 16:51 | 显示全部楼层
Google浏览器也可以看出效果...不错

只学java 发表于 2011-6-20 16:52 | 显示全部楼层
浏览器兼容吗?


yoyo 发表于 2011-8-17 12:21 | 显示全部楼层
越办越好~~~~~~~~~`
shmilyyu 发表于 2011-9-15 10:25 | 显示全部楼层
看看...............
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-28 17:37 , Processed in 0.140226 second(s), 24 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表