不使用背景图片实现圆角效果

最新推荐文章于 2016-02-25 14:06:37 发布

天使小宝

最新推荐文章于 2016-02-25 14:06:37 发布

阅读量627

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8253772

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>实现圆角效果</title>
        <style>
            .item{
                width: 100px;
                margin: 0 auto;
                padding: 0;
                font: 14px Arial;
                font-weight: bold;
            }
            .item p{
                padding: 0 0 2px 0;
                margin: 0px;
                text-align: center;
                background: #cc6;
                border: 1px solid #000;
                border-top-width: 0px;
            }
            .item div{
                height: 1px;
                overflow: hidden;
                background: #cc6;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
            }
            .item .row1{
                margin: 0 5px;
                background: #000;
            }
            .item .row2{
                margin: 0 3px;
                border: 0 2px;
            }
            .item .row3{
                margin: 0 2px;
            }
            .item .row4{
                margin: 0 1px;
                height: 2px;
            }
        </style>
    </head>
    <body>
        <div class="item">
            <div class="row1"></div>
            <div class="row2"></div>
            <div class="row3"></div>
            <div class="row4"></div>
            <p>Home</p>
        </div>
    </body>
</html>