CSS3-如何不用图片实现div圆角效果且兼容ie6

前端开发 前端开发 主题:1148 回复:2395

CSS3-如何不用图片实现div圆角效果且兼容ie6

晚风撩人 发布于 2017-03-20 字数 0 浏览 1059 回复 1

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

归属感 2017-06-07 1 楼

这个问题搜索下并不难解决,我借用别人的代码给你解答,IE6下已经测试过。

样式代码:

#menu {
    width:450px;
    font-size:14px;
    margin:100px auto;
    padding:0;
    overflow:hidden;
}
#menu a {
    text-decoration:none;
    display:block;
    background:#999;
    color:#FFF;
    margin-top:15px;
}
#menu a:hover {
    margin:0 0 0 0;
    height:30px;
    padding-bottom:8px;
    background:#0CC;
    color:#FF0;
    font-size:18px;
}
#menu p {
    text-align:center;
    height:20px;
    margin:0 1px 0 0;
}
#menu ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    width:450px;
}
#menu ul li {
    width:80px;
    float:left;
    padding:0;
    margin:0;
}
#menu ul li div {
    height:1px;
}
#menu ul li .row1 {
    overflow:hidden;
    border-width:0 5px;
    border-style:solid;
    border-color:#fff;
}
#menu ul li .row2 {
    overflow:hidden;
    border-width:0 3px;
    border-style:solid;
    border-color:#fff;
}
#menu ul li .row3 {
    overflow:hidden;
    border-width:0 2px;
    border-style:solid;
    border-color:#fff;
}
#menu ul li .row4 {
    overflow:hidden;
    border-width:0 1px;
    border-style:solid;
    border-color:#fff;
}
/* 清除浮动 */
.clear {
    dipslay:block!important;
    float:none!important;
    clear:both;
    overflow:hidden;
    width:auto!important;
    height:0;
    margin:0 auto!important;
    padding:0!important;
    font-size:0;
    line-height:0;
}

页面中的代码:

<body>
<div id="menu">
    <ul>
        <li>
            <div class=" clear"></div> 
            <a href="#">
                <div class="row1"></div>
                <div class="row2"></div>
                <div class="row3"></div>
                <div class="row4"></div>
                <p>test</p>
            </a> 
        </li>
    </ul>
</div>
</body>