圆角矩形

来源：互联网发布：云南投资公司知乎编辑：程序博客网时间：2024/04/29 07:16

用一个图片就可以做出圆角div，看代码！

<style>
    .tb{
        width: 181px; 
        background: #8cc355 url(bottom.gif) no-repeat left bottom;
    }
    .tb h1{
        padding: 10px 10px 0px 10px;
        background: #8cc355 url(top.gif) no-repeat left top;
    }
    .tb p{
        padding: 0px 10px 10px 10px;
    }
    a,a:active, a:link, a:hover, avisited{
        font-size:14px;
        font-weight: bold;
        color: blue;
        text-decoration: none;
    }
    a:hover{
        font-size:14px;
        font-weight: bold;
        color: red;
        text-decoration: underline;
    }
    #corner {
        width: 220px;
    }
    #corner .top{
        height: 10px;
        overflow: hidden;
    }
    #corner .top .top-left{
        width: 10px;
        float: left;
        background: url(corners.gif) no repeat left top;
        
    }
    #corner .top .top-center{
        border-top: solid #8CB4D0 1px;
        width: 200px;
        float: left;
    }
    #corner .top .top-right{
        width: 10px;
        float: left;
        background: url(corners.gif) no-repeat right top;
    }
    .bottom{
        height: 10px;
        overflow: hidden;
    }
    .bottom-left{
        width: 10px;
        float: left;
        background: url(corners.gif) no repeat;
        background-position: 0 -10px;
    }
    .bottom-center{
        border-bottom: solid #8CB4D0 1px;
        width: 200px;
        height: 10px;
        overflow: hidden;
        float: left;
    }
    .bottom-right{
        width: 10px;
        float: left;
        background: url(corners.gif) no-repeat;
        background-position: -10px -10px;
    }
    .content{
        border-left: solid #8CB4D0 1px;
        border-right: solid #8CB4D0 1px;
        padding: 0px 10px;
    }
</style>
<div class="tb">
    <h1><a href="#">TITLE</a></h1>
    <p>THIS THE CONTENT</p>
</div>
<br>
<div style="height: 5px; width: 50px; border: solid red 1px; overflow: hidden"></div>
<br>
<div id="corner">
    <div class="top">
        <div class="top-left"></div>
        <div class="top-center"></div>
        <div class="top-right"></div>
    </div>
    <div class="content">this is the content
    <br>this is the contentthis is the contentthis is the contentthis is the contentthis is the content</div>
    <div class="bottom">
        <div class="bottom-left"></div>
        <div class="bottom-center"></div>
        <div class="bottom-right"></div>
    </div>
</div>

=============================================

/**JS画图，JS小游戏，JS代码集合， JS地图，JS写RPG游戏，JS动画，JS绘图, JS对象, JS函数, JS经典例子,JS面向对象, javascript画图，javascript小游戏，javascript代码集合， javascript地图，javascript写RPG游戏，javascript动画，javascript绘图, javascript对象, javascript函数, javascript经典例子,javascript面向对象,css网站，css资源，css代码，css学习，css下载，css教程,css分享**/