前端之路

写了几个CSS3的圆角框架示例代码.

标题

        这个是内容
    


标题

        这个是内容
    


menu




    这个是中文按钮>>

*{padding:0; margin:0; line-height:1;}
        body{
            padding:20px;
        }

        .round{
            width:20%;
            border:1px #ccc solid;
            border-color:#ccc;
            border-radius: 5px;
            -webkit-box-shadow:2px 2px 2px #eee;
            -moz-box-shadow:2px 2px 2px #eee;
            margin:10px;
        }

        .round h2{
            padding:5px;
            line-height:1.5;
            font-size:14px;
            border-bottom:1px solid #fff;
            background:#efefef;
            background-image:-moz-linear-gradient(top, #fff, #eee);
            background-image:-webkit-linear-gradient(top,#fff,#eee);
        }

        .round .frame{
            padding:5px;
            line-height:2;
            font-size:12px;
        }

        .roundv2 h2{
            background-color:#D9DDE1;
            background-image:-moz-linear-gradient(top, #D9DDE1, #C2C8CD);
            background-image:-webkit-linear-gradient(top,#D9DDE1,#C2C8CD);
        }

        .menu{
            width:50%;
            border-radius: 5px;
            margin:10px;
            background:#3C7EC8;
            background-image:-moz-linear-gradient(top, #4989CD, #3372C0);
            background-image:-webkit-linear-gradient(top,#4989CD,#3372C0);
            line-height:2;
            padding:0 1em;
            color:#fff;
        }

        .titlebtn{
            border-radius: 5px;
            background-color:#efefef;
            background-image:-moz-linear-gradient(top, #EFEFEF, #CCC);
            background-image:-webkit-linear-gradient(top,#EFEFEF,#CCC);
            width:200px;
            line-height:2;
            padding:0 1em;
            margin:20px 10px;
            position:relative;
            text-indent:48px;
        }

        .titlebtn .icon{
            background:url('n.png') no-repeat left top;
            width:48px;
            height:48px;
            display:block;
            position:absolute;
            top:-10px;
            left:5px;
        }

        .titlebtn a{
            font-weight:bold;
            font-family:'微软雅黑';
        }